3

Estou tentando usar uma checkbox para excluir varias linhas de uma tabela criada pelo javaScript com informações de input. Porém eu não sei como fazer ele reconhecer a td para pode executar a função de excluir(Botão);

function adicionarItem() {
  var refNome = document.querySelector("#nome").value;
  var refCpf = document.querySelector("#cpf").value;
  var refRg = document.querySelector("#rg").value;

  var usuarioTr = document.createElement("tr");
  usuarioTr.className = "user";

  var selec = document.createElement('td');
  selec.className = 'usr';
  var input = document.createElement('input');
  input.type = 'checkbox';
  selec.appendChild(input);
  var nomeTd = document.createElement("td");
  var cpfTd = document.createElement("td");
  var rgTd = document.createElement("td");

  nomeTd.textContent = refNome;
  cpfTd.textContent = refCpf;
  rgTd.textContent = refRg;

  usuarioTr.appendChild(selec);
  usuarioTr.appendChild(nomeTd);
  usuarioTr.appendChild(cpfTd);
  usuarioTr.appendChild(rgTd);

  var tabela = document.querySelector("#tabela");

  tabela.appendChild(usuarioTr);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Teste01</title>
</head>

<body>
  <link rel="stylesheet" type="text/css" href="main.css" />
  <script src="./main.js"></script>

  <section>
    <form>
      <div>
        <label for="nome">Nome:</label>
        <input id="nome" name="nome" type="text" placeholder="Digite seu nome aqui" autofocus/>
      </div>
      <div>
        <label for="cpf">CPF:</label>
        <input id="cpf" name="cpf" type="number" placeholder="Digite seu CPF" />
      </div>
      <div>
        <label for="rg">RG:</label>
        <input id="rg" name="rg" type="number" placeholder="Digite seu RG" />
      </div>

      <button id="adicionarBotao" onclick="adicionarItem()" type="button">Adicionar</button>
      <button id="editarBotao" onclick="" type="button">Editar</button>
      <button id="excluirBotao" onclick="" type="button">Excluir</button>
    </form>
  </section>

  <table>
    <thead>
      <tr>
        <th>Selecionar</th>
        <th>Nome</th>
        <th>CPF</th>
        <th>RG</th>
      </tr>
    </thead>
    <tbody id="tabela">

    </tbody>
  </table>

</body>

</html>

1 Resposta 1

1

Da para excluir com a seguinte função:

function removerItem() {
  ckList = document.querySelectorAll("input[type=checkbox]:checked");
  ckList.forEach(function(el) {
    el.parentElement.parentElement.remove();
  });
}

onde ckList é uma lista com todos os elementos input do tipo checkbox que estão marcados(checked), e o forEach encarrega-se de remover todas as tr's onde esses elementos estão.

function adicionarItem() {
  var refNome = document.querySelector("#nome").value;
  var refCpf = document.querySelector("#cpf").value;
  var refRg = document.querySelector("#rg").value;

  var usuarioTr = document.createElement("tr");
  usuarioTr.className = "user";

  var selec = document.createElement('td');
  selec.className = 'usr';
  var input = document.createElement('input');
  input.type = 'checkbox';
  selec.appendChild(input);
  var nomeTd = document.createElement("td");
  var cpfTd = document.createElement("td");
  var rgTd = document.createElement("td");

  nomeTd.textContent = refNome;
  cpfTd.textContent = refCpf;
  rgTd.textContent = refRg;

  usuarioTr.appendChild(selec);
  usuarioTr.appendChild(nomeTd);
  usuarioTr.appendChild(cpfTd);
  usuarioTr.appendChild(rgTd);

  var tabela = document.querySelector("#tabela");

  tabela.appendChild(usuarioTr);
}

function removerItem() {
  ckList = document.querySelectorAll("input[type=checkbox]:checked");
  ckList.forEach(function(el) {
    el.parentElement.parentElement.remove();
  });
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Teste01</title>
</head>

<body>
  <link rel="stylesheet" type="text/css" href="main.css" />
  <script src="./main.js"></script>

  <section>
    <form>
      <div>
        <label for="nome">Nome:</label>
        <input id="nome" name="nome" type="text" placeholder="Digite seu nome aqui" autofocus/>
      </div>
      <div>
        <label for="cpf">CPF:</label>
        <input id="cpf" name="cpf" type="number" placeholder="Digite seu CPF" />
      </div>
      <div>
        <label for="rg">RG:</label>
        <input id="rg" name="rg" type="number" placeholder="Digite seu RG" />
      </div>

      <button id="adicionarBotao" onclick="adicionarItem()" type="button">Adicionar</button>
      <button id="editarBotao" onclick="" type="button">Editar</button>
      <button id="excluirBotao" onclick="removerItem()" type="button">Excluir</button>
    </form>
  </section>

  <table>
    <thead>
      <tr>
        <th>Selecionar</th>
        <th>Nome</th>
        <th>CPF</th>
        <th>RG</th>
      </tr>
    </thead>
    <tbody id="tabela">

    </tbody>
  </table>

</body>

</html>

2
  • 1
    Muito bom, só aproveitaria o seletor pra já trazer só os checkboxes que já estão selecionados usado isso: document.querySelectorAll("input[type=checkbox]:checked") Commented 23/08/2017 às 14:55
  • @RicardoPontual Perfeito, acrescentei à resposta, valeu =)
    – Mathiasfc
    Commented 23/08/2017 às 15:31

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 .