удаление определенных элементов
Доброго времени суток.
Есть такой незамысловатый html: table { border-collapse: collapse; } td { height: 20px; width: 20px; border: solid black 1px; } .td1 { height: 20px; width: 60px; border: solid black 1px; } <link rel = "stylesheet" type = "text/css" href = "114.css"> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">1</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">2</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">3</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">4</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">5</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">6</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">7</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <button>Click</button> <script src = "114.js"></script> document.getElementsByTagName('button')[0].addEventListener('click', gggg); function gggg() { let a = document.getElementsByClassName('td1').length; for (let i = 0; i < a; i++) { document.getElementsByClassName('td1')[i].parentNode.parentNode.parentNode.remove(); } } Задачка - как удалить таблицы, в которых есть td с классом td1. Объясните пожалуйста полному :blink: почему нечётные удаляются??? |
<table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">1</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">2</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">3</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">4</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">5</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">6</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">7</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <script> let a = document.getElementsByClassName('td1'); for (var i = a.length - 1; i >= 0; i--) { a[i].parentNode.parentNode.parentNode.remove(); }; </script> |
Цитата:
решение удалять с конца или document.querySelectorAll вместо getElements |
Цитата:
|
Цитата:
document.getElementsByTagName('button')[0].addEventListener('click', gggg); function gggg() { let a = document.getElementsByClassName('td1').length; var x = document.querySelectorAll('.td1'); for (let i = 0; i < a; i++){ x[i].parentNode.parentNode.parentNode.remove(); } } |
Dilettante_Pro,
да в его случае достаточно убрать i из строки удаления |
Цитата:
|
atanov,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> table { border-collapse: collapse; } td { height: 20px; width: 20px; border: solid black 1px; } .td1 { height: 20px; width: 60px; border: solid black 1px; background-color: #FF0000; } </style> </head> <body> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">1</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">2</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">3</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">4</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">5</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">6</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <table> <tbody> <tr> <td class = "td1">7</td> </tr> </tbody> </table> <table> <tbody> <tr> <td></td><td></td><td></td> </tr> </tbody> </table> <button>Click</button> <script> document.getElementsByTagName('button')[0].addEventListener('click', gggg); function gggg() { let a = document.getElementsByClassName('td1').length; for (let i = 0; i < a; i++) { document.getElementsByClassName('td1')[0].parentNode.parentNode.parentNode.remove(); } } </script> </body> </html> |
j0hnik,
строки 4 и 5 лучше поменять с друг другом. :) |
Цитата:
let a = document.querySelectorAll('.td1').length; for (var i = 0; i < a; i++) { document.querySelector('.td1').parentNode.parentNode.parentNode.remove(); }; |
Часовой пояс GMT +3, время: 23:48. |