javascript - 如何删除所有表行(从 if 语句)，而不仅仅是 JavaScript 中的偶数/奇数

Question

我正在尝试制作一个大表格，所以我希望能够在通过电子邮件发送之前删除表格中的所有空行。

基本上我正在寻找所有具有“elem”类的输入，而不是尝试删除具有空输入的整行。

但是正如您在这个 fiddle 中看到的那样，只有奇数行被删除了:

  var inputs = document.getElementsByClassName('elem');
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].value == '') {
          inputs[i].parentNode.parentNode.parentNode.removeChild(inputs[i].parentNode.parentNode);
          }
        }

td {
  padding: 10px;
  background-color: #989898;
}

input {
  width: 60px;
  height: 100%;
  border: none;
}

<table>
<tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th><th>Col6</th><th>Col7</th><th>Col8</th><th>Input</th></tr>
<tr>
  <td>1</td>
  <td>Text</td>
  <td>Name<input type="hidden" name="1" value="1 - Name "></td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>-</td>
  <td>-</td>
  <td><input type="number" class="elem" name="1-1" value=""></td>
</tr>
<tr>
  <td>2</td>
  <td>Text</td>
  <td>Name<input type="hidden" name="2" value="2 - Name"></td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>-</td>
  <td>-</td>
  <td><input type="number" class="elem" name="2-2" value=""></td>
</tr>
<tr>
  <td>3</td>
  <td>Text</td>
  <td>Name<input type="hidden" name="3" value="3 - Name"></td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>-</td>
  <td>-</td>
  <td><input type="number" class="elem" name="3-3" value=""></td>
</tr>
<tr>
  <td>4</td>
  <td>Text</td>
  <td>Name<input type="hidden" name="4" value="4 - Name "></td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>-</td>
  <td>-</td>
  <td><input type="number" class="elem" name="4-4" value=""></td>
</tr>
</table>

注意:我在提交后发送或触发此操作没有任何问题。

Answer 1

现场收藏

使用 document.querySelectorAll('.elem') 而不是 document.getElementsByClassName('elem')

旧方法，例如 .getElementsByClassName() , .getElementsByTagName() , 和 .getElementsByName()返回 Live Collection (see item 8.) . Live Collection 会立即更新，从而影响它自己的 .length在 for 的每次迭代中循环和移动引用会导致意想不到的结果，例如奇数定位元素被移除和偶数定位元素被跳过。

for 中的现场收藏循环

1. 第一次迭代 input.length = 4
   • for (let i = 0; 0 < 4 i++) {...
2. 第一行<input>已删除，现在 input.length = 3
   • inputs[ 0 ].closest('tr').remove()
3. 第二次迭代 i = 1 但是 inputs[1] 不是第二行 <input> 不再是现在 input[0] 所以它被跳过而不是被删除。
   • for (let i = 0; 1 < 3 i++) {...
4. 第三排 <input> 已删除，现在 input.length = 2
   • inputs[ 1 ].closest('tr').remove()
5. 第三次迭代 i = 2 但是 inputs[2] 不存在因为只有2 <input> 左(记住 input.length = 2 )。
   • for (let i = 0; 2 < 2 i++) {...
6. 第四排 <input> 从未被触及，因为它现在 inputs[1]
   • inputs[ 2 ].closest('tr').remove()
7. 第四次迭代 i = 3 和 input.length = 2 完成for循环。
   • for (let i = 0; 3 < 2 i++) {...

document.querySelectorAll()返回一个 “静态” NodeList，它在运行时不会更新，从而防止所有 DOM 引用发生变化。

Demo 1 是带document.querySelectorAll() 的OP 代码Demo 2 是一个更好的版本 for...of loop , .closest() , 和 .remove()

演示 1

var inputs = document.querySelectorAll('.elem');
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].value == '') {
    inputs[i].parentNode.parentNode.parentNode.removeChild(inputs[i].parentNode.parentNode);
  }
}

td {
  padding: 10px;
  background-color: #989898;
}

input {
  width: 60px;
  height: 100%;
  border: none;
}

<table><tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th><th>Col6</th><th>Col7</th><th>Col8</th><th>Input</th></tr><tr><td>1</td><td>Text</td><td>Name<input type="hidden" name="1" value="1 - Name "></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="1-1" value=""></td></tr><tr><td>2</td><td>Text</td><td>Name<input type="hidden" name="2" value="2 - Name"></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="2-2" value=""></td></tr><tr><td>3</td><td>Text</td><td>Name<input type="hidden" name="3" value="3 - Name"></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="3-3" value="4"></td></tr><tr><td>4</td><td>Text</td><td>Name<input type="hidden" name="4" value="4 - Name "></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="4-4" value=""></td></tr></table>

演示2

const inputs = document.querySelectorAll('.elem');

for (let input of inputs) {
  if (!input.value) {
    input.closest('tr').remove();
  }
}

td {
  padding: 10px;
  background-color: #989898;
}

input {
  width: 60px;
  height: 100%;
  border: none;
}

<table><tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th><th>Col6</th><th>Col7</th><th>Col8</th><th>Input</th></tr><tr><td>1</td><td>Text</td><td>Name<input type="hidden" name="1" value="1 - Name "></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="1-1" value=""></td></tr><tr><td>2</td><td>Text</td><td>Name<input type="hidden" name="2" value="2 - Name"></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="2-2" value=""></td></tr><tr><td>3</td><td>Text</td><td>Name<input type="hidden" name="3" value="3 - Name"></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="3-3" value=""></td></tr><tr><td>4</td><td>Text</td><td>Name<input type="hidden" name="4" value="4 - Name "></td><td>Text</td><td>Text</td><td>Text</td><td>-</td><td>-</td><td><input type="number" class="elem" name="4-4" value=""></td></tr></table>