Estoy tratando de eliminar ciertos niños de DOM iterando a través de ellos. Tengo una mesa, y estoy recorriendo los niños y eliminando algunos como este:
for (const row of table.children) { const testRow = row.children[2]; if (testRow.textContent === "false") { table.removeChild(row); } } Cuando se ejecuta este código, se eliminan algunos de los elementos secundarios que cumplen la condición testRow.textContent === "false" , pero no se eliminan otras filas que cumplen la condición .
Cerrar la sesión de t.children.lengh a medida que avanza el bucle revela que el tamaño está disminuyendo (debido a la eliminación de los elementos secundarios). Mi teoría es que eliminar a un niño estropea el iterador. Intenté reescribir este código como un bucle for y obtuve el mismo resultado: algunos elementos secundarios se "omiten" y no se eliminan.
¿Ideas sobre cómo eliminar ciertos elementos secundarios de un elemento DOM (basado en datos extraídos dinámicamente)?
Esto usa deleteRow tomando el índice de la fila y usando un bucle for tradicional que itera hacia atrás desde el final de las filas de la tabla hasta el principio, también utiliza la propiedad de rows del elemento de la tabla:
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>table.children es unaHTMLCollection ; se actualiza a medida que cambia el documento. Puede convertirlo en una matriz normal para que los cambios en el DOM no afecten los contenidos por los que está iterando.
En el siguiente ejemplo, he usado el operador de propagación ( ... ) para crear la nueva matriz, pero podría usar Array.from en su lugar, por ejemplo 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> Debido a que [...tbody.children] es una matriz normal, puede usar funciones como filter y forEach si lo desea, por ejemplo:
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>Esta solución que encontré funciona para todos los tipos de DOM (frente a solo tablas en la respuesta de Ryan Wilson ). Simplemente disminuya el índice cada vez que se elimine un objeto DOM para que vuelva a ejecutar el ciclo para el nuevo i -ésimo elemento (porque el anterior se habrá eliminado):
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--; } }