Delete table row by checkBox

Question

Delete table row by checkBox

Navigation

#1 by (1 votes)

3

I am trying to use a checkbox to delete multiple rows from a table created by javaScript with input information. But I do not know how to make it recognize the DT to can perform the delete function (Button);

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>

javascript html5 css3

asked by anonymous 23.08.2017 / 16:29

1 answer

How to simulate a radio-type input for the screen reader? Navigation by Id Ionic 2

score 1 · Accepted Answer

Give away with the following function:

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

where ckList is a list with all input elements of type checkbox that are marked ( checked ), and forEach is responsible for removing all tr's where those elements are .

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>