Get index value created element

Question

Get index value created element

Asked 5 years, 1 month ago

Viewed 127 times

0

const setup = async() => {
let teuarray = [];
teuarray.push({id:"0",nome: "Vitor"}, {id:"1",nome: "Pedro"}, {id:"2",nome: "João"});

const lista = document.getElementById('lista');

teuarray.map((cliente)=> {
      let divRowT = document.createElement("div");
      divRowT.className = "row-table";
      let divDivT = document.createElement("div");
      divDivT.className = "div-table";

      let id = document.createElement("a");
      id.className = "col-table";
      id.href = "https://answall.com";
      let idValue = document.createElement("div");
      idValue.appendChild(document.createTextNode(cliente.id));
      id.appendChild(idValue);
      divDivT.appendChild(id);

      let nome = document.createElement("a");
      nome.className = "col-table";
      nome.href = "https://answall.com";
      let nomeValue = document.createElement("div");
      nomeValue.appendChild(document.createTextNode(cliente.nome));
      nome.appendChild(nomeValue);
      divDivT.appendChild(nome);

      let divColT = document.createElement("div");
      divColT.className = "col-table";
      let btnExcluir = document.createElement("input");
      btnExcluir.type = "button";
      btnExcluir.id = "excluirUsuario";
      btnExcluir.value = "Excluir";
      btnExcluir.addEventListener("click", excluir, false);
      divColT.appendChild(btnExcluir);
      divDivT.appendChild(divColT);

      divRowT.appendChild(divDivT);
      lista.appendChild(divRowT);
    });
    }
    
    function excluir() {
    var c = document.getElementById("excluirUsuario").childNodes;

    console.log(c[0]);
    // let btnSelecionado = HTMLSelectElement>event.currentTarget;
	// let elemento = btnSelecionado.parentElement;
    // console.log(btnSelecionado, elemento);
  }

.row-table-head, .div-table, .row-table{
    display: grid;
    grid-template-columns: 50px 180px 70px;
    width: 300px;
    margin: auto;
  }
  .row-table-head{
    display: block;
  }
  .row-table a{
    text-decoration: none;
    color: #000;
  }
  .div-table:hover{
    background-color: #a0a0a0;
  }
  .row-table-head .col-table{
    padding: 6px 8px;
    border: 1px solid #ccc;
  }
  .row-table .col-table{
   padding: 0px 6px;
  }

<body align="center" onload="setup()"> <!--retirei o setup(), pois já faço uma chamada no js-->
        <h1>IMPEXPROS</h1>

        <div id="lista" class="table"> <!--inclui um id pra facilitar no js-->
          <div class="row-table-head">
            <div style="background-color:black; color:white; font-weight:bold" class="col-table">LISTA TODOS USUARIOS</div>
          </div>
        </div>
  </body>

As I do to get the element index, for example, when I press the delete button of the user Pedro, I know that he is the 2 of the list. just using js.

Victor, you want to delete visually only?

– Ewerton Belo

2019/10/10 at 12:55

1 answer

Browser other questions tagged javascript z-index

You are not signed in. Login or sign up in order to post.

by Ewerton Belo • **392** points · Answer 1 · 2019-10-10T12:58:57+00:00

You can pass the client id pro id of the delete button, and then recover it in the delete function

Would look like this:

const setup = async() => {
  let teuarray = [];
  teuarray.push({id:"0",nome: "Vitor"}, {id:"1",nome: "Pedro"}, {id:"2",nome: "João"});

  const lista = document.getElementById('lista');

  teuarray.map((cliente)=> {
        let divRowT = document.createElement("div");
        divRowT.className = "row-table";
        let divDivT = document.createElement("div");
        divDivT.className = "div-table";

        let id = document.createElement("a");
        id.className = "col-table";
        id.href = "https://answall.com";
        let idValue = document.createElement("div");
        idValue.appendChild(document.createTextNode(cliente.id));
        id.appendChild(idValue);
        divDivT.appendChild(id);

        let nome = document.createElement("a");
        nome.className = "col-table";
        nome.href = "https://answall.com";
        let nomeValue = document.createElement("div");
        nomeValue.appendChild(document.createTextNode(cliente.nome));
        nome.appendChild(nomeValue);
        divDivT.appendChild(nome);

        let divColT = document.createElement("div");
        divColT.className = "col-table";
        let btnExcluir = document.createElement("input");
        btnExcluir.type = "button";
        btnExcluir.id = cliente.id; // no id do button eu passei o id do usuário
        btnExcluir.value = "Excluir";
        btnExcluir.addEventListener("click", excluir, false);
        divColT.appendChild(btnExcluir);
        divDivT.appendChild(divColT);

        divRowT.appendChild(divDivT);
        lista.appendChild(divRowT);
      });
      }
    
function excluir() 
{
  // var c = document.getElementById("excluirUsuario").childNodes;

  // console.log(c[0]);
  let btnSelecionado = event.currentTarget;
  let elementopai = btnSelecionado.parentElement;
  let elementopaidopai = elementopai.parentElement;
  elementopaidopai.remove();
  console.log(btnSelecionado.id);
}

.row-table-head, .div-table, .row-table{
    display: grid;
    grid-template-columns: 50px 180px 70px;
    width: 300px;
    margin: auto;
  }
  .row-table-head{
    display: block;
  }
  .row-table a{
    text-decoration: none;
    color: #000;
  }
  .div-table:hover{
    background-color: #a0a0a0;
  }
  .row-table-head .col-table{
    padding: 6px 8px;
    border: 1px solid #ccc;
  }
  .row-table .col-table{
   padding: 0px 6px;

  }

<body align="center" onload="setup()">
        <h1>IMPEXPROS</h1>

        <div id="lista" class="table"> <!--inclui um id pra facilitar no js-->
          <div class="row-table-head">
            <div style="background-color:black; color:white; font-weight:bold" class="col-table">LISTA TODOS USUARIOS</div>
          </div>
        </div>
  </body>