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://pt.stackoverflow.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://pt.stackoverflow.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>

Como eu faço para pegar o índex do elemento, por exemplo, quando eu apertar o botão de excluir do usuário Pedro, eu sei que ele é o 2 da lista. apenas usando js.

1
  • Vitor, você quer excluir visualmente apenas? Commented 10/10/2019 às 12:55

1 Resposta 1

1

Dá pra passar o id do cliente pro id do botão excluir, e então recuperar ele na função excluir

Ficaria assim:

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://pt.stackoverflow.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://pt.stackoverflow.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>

6
  • Eu preciso saber a posição na verdade, por exemplo, se eu apertar o botão excluir do Pedro eu tenho uma variável que fale pra mim que é o 2 da lista. Commented 10/10/2019 às 13:02
  • Então você quer o id do item que foi excluido? Commented 10/10/2019 às 13:03
  • Isso, ou o index, alguma coisa que eu sei qual a posição dele. de preferencia a posição da lista mesmo. Commented 10/10/2019 às 13:05
  • Ah beleza, vou editar a resposta Commented 10/10/2019 às 13:06
  • Opa, isso mesmo, obrigado Ewerton!! vc é o cara! Commented 10/10/2019 às 13:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .