Javascript - 按 id 删除行

Question

我当前正在尝试删除 html 表中的行 每行有三个值。第三个值是一个复选框，用于选中应删除的行。单击删除行按钮后，所有选中的行都应被删除。问题是当我单击按钮时我没有执行任何操作并且没有删除任何行。

var counter = 0;

function addRow() {
  var table = document.getElementById("table");
  table.setAttribute("border", "1");
  var row = table.insertRow(counter);
  row.setAttribute("id", "row" + counter);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("name").value;
  cell2.innerHTML = document.getElementById("url").value;

  var checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("name", "shouldDelete");
  checkbox.setAttribute("id", counter);
  cell3.appendChild(checkbox);

  counter = counter + 1;

}

function deleteRows() {
  var checkedItems = document.getElementsByName("shouldDelete");
  var table = document.getElementById("table");
  for (var i = 0; i < checkedItems.length; i++) {
    if (checkedItems[i].checked) {
      var row = document.getElementById("row" + i);
      table.removeChild(row);
    }
  }
}

table {
  width: 50%;
}

 <h1>Tell me your URL:</h1>
<p>Add a new row</p>
<p>
  <label>Your name:</label>
  <input type="text" id="name">
</p>
<p>
  <label>Your URL:</label>
  <input type="text" id="url">
</p>
<p>
  <button onclick="addRow()">Add to bottom</button>
  <button onclick="deleteRows()">Delete selected row(s)</button>
</p>
<hr>
<table id="table"></table>

这就是我解决问题的方法:

function deleteRows() {
            var checkedItems = document.getElementsByName("shouldDelete");
            var ids = [];
            for(var i=0;i<checkedItems.length;i++) {
                if(checkedItems[i].checked) {
                    ids.push("row"+checkedItems[i].id)
                }
            }

            for(var i=0;i<ids.length;i++) {
                var row = document.getElementById(ids[i]);
                var parent = row.parentNode;
                parent.removeChild(row);
                counter = counter-1;
            }
        }

Answer 1

捕获它

由于您有行的 ID，因此您只需选择它，然后选择它的父行并进行删除即可。

你的代码不起作用，因为表中有一个 tbody 标签或类似的东西，所以 table var 不直接包含 row .

     function deleteRows() {

        var checkedItems = document.getElementsByName("shouldDelete");
        for(var i=0;i<checkedItems.length;i++) {
            if(checkedItems[i].checked) {
                var row = document.getElementById("row"+i);

                var parent = row.parentNode

                parent.removeChild(row)
            }
        }
    }

已更新

好的，我修好了。您需要在循环遍历每个行并删除之前存储行名，因为一旦删除一个项目，您也会删除一个复选框，并且它开始将您指向错误的元素。

function deleteRows() {

        var deletionRowIds = []

        var checkedItems = document.querySelectorAll('[name="shouldDelete"]:checked');

        console.log(checkedItems)

        for (var i = 0; i < checkedItems.length; i++){
            deletionRowIds.push('row' + checkedItems[i].id);
        }


        deletionRowIds.forEach(function(rowId){ 


            var row = document.getElementById(rowId)
          var rowParent = row.parentNode

          rowParent.removeChild(row)
        });

    }