從DOM(JS)中洗掉多個子項

我試圖通過迭代它們來從 DOM 中洗掉某些子項。我有一張桌子，我正在遍歷孩子們并洗掉一些這樣的：

for (const row of table.children) {
  const testRow = row.children[2];
  if (testRow.textContent === "false") {
    table.removeChild(row);
  }
}

運行此代碼時，會洗掉一些滿足條件的子行testRow.textContent === "false"，但不會洗掉其他滿足條件的行。

隨著回圈的進行注銷t.children.lengh表明大小正在減小（由于子級被洗掉）。我的理論是洗掉一個孩子會弄亂迭代器。我嘗試將此代碼重寫為 for 回圈并得到相同的結果：一些孩子被“跳過”而不是被洗掉。

關于如何洗掉 DOM 元素的某些子元素的想法（基于動態拉取的資料）？

uj5u.com熱心網友回復：

table.children是一個HTMLCollection；它會隨著您更改檔案而更新。您可以將其轉換為普通陣列，以便對 DOM 的更改不會影響您正在迭代的內容。

在下面的示例中，我使用擴展運算子 ( ...) 創建新陣列，但您可以使用 Array.from 代替 eg Array.from(tbody.children)。

const tbody = document.querySelector('table tbody');

console.log(tbody.children.constructor.name);

for (const row of [...tbody.children]) {
  const testRow = row.children[1];
  if (testRow.textContent === "false") {
    tbody.removeChild(row);
  }
}

<table>
  <tbody>
    <tr><td>A</td><td>true</td></tr>
    <tr><td>B</td><td>false</td></tr>
    <tr><td>C</td><td>false</td></tr>
    <tr><td>D</td><td>true</td></tr>
    <tr><td>E</td><td>false</td></tr>
    <tr><td>F</td><td>true</td></tr>
  </tbody>
</table>

因為[...tbody.children]是一個普通陣列，如果你愿意，你可以使用 filter 和 forEach 之類的函式，例如：

顯示代碼片段

const tbody = document.querySelector('table tbody');

[...tbody.children]
  .filter((row) => row.cells[1].textContent === "false")
  .forEach((row) => { tbody.removeChild(row); });

<table>
  <tbody>
    <tr><td>A</td><td>true</td></tr>
    <tr><td>B</td><td>false</td></tr>
    <tr><td>C</td><td>false</td></tr>
    <tr><td>D</td><td>true</td></tr>
    <tr><td>E</td><td>false</td></tr>
    <tr><td>F</td><td>true</td></tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

這使用deleteRow獲取行的索引并使用for從表行的末尾到開頭向后迭代的傳統回圈，它還利用rows了表元素的屬性：

window.addEventListener('DOMContentLoaded', function(){
   const tbl = document.querySelector('table');
   for(let a = tbl.rows.length - 1; a >= 0; a--){
      //you can modify this next condition to match what you want
      if(tbl.rows[a].cells[0].textContent === "Even"){
         tbl.deleteRow(a);
      }
   }
});

<table>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
<tr><td>Even</td></tr>
<tr><td>Odd</td></tr>
</table>

uj5u.com熱心網友回復：

我發現這個解決方案適用于所有 DOM 型別（與Ryan Wilson 的答案中的表格相比）。每次洗掉 DOM 物件時只需減少索引，以便它將重新運行新i元素的回圈（因為前一個元素將被洗掉）：

for (let i = 0; i < t.children.length; i  ) {
  const row = table.children[i];
  const testRow = row.children[2];
  if (testRow.textContent === "false") {
    table.removeChild(row);
    i--;
  }
}

uj5u.com熱心網友回復：

如果元素為空，則可以使用 css:empty選擇器：

setTimeout(()=>{
    for (let el of document.querySelectorAll('tr td:empty')){
        el.remove()
    }
},2000)

td {border: 1px solid black;height:30px;}

<table>
<tr><td>text</td></tr>
<tr><td></td></tr>
<tr><td>text</td></tr>
<tr><td></td></tr>

</table>

標籤：javascript dom 迭代器

上一篇：反應警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具不是由地圖中缺少關鍵引起的

下一篇：使用SQL拆分表中的記錄