удаление определенных элементов [Архив форума]

Просмотр полной версии : удаление определенных элементов

atanov

22.10.2018, 17:08

Доброго времени суток.

Есть такой незамысловатый 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: почему нечётные удаляются???

Dilettante_Pro

22.10.2018, 17:38

<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>

рони

22.10.2018, 17:41

почему нечётные удаляются???
потому что getElements это живая коллекция, при удалении создаётся новый список элементов.
решение удалять с конца или document.querySelectorAll вместо getElements

Dilettante_Pro

22.10.2018, 17:49

document.querySelectorAll вместо getElements
Простая замена по скрипту ТопикСтартера не поможет - он же все время коллекцию перечитывает.

j0hnik

22.10.2018, 18:03

Простая замена по скрипту ТопикСтартера не поможет - он же все время коллекцию перечитывает.
поможет если ее перед циклом сохранить в переменную
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();
}
}

рони

22.10.2018, 18:10

Dilettante_Pro,
да в его случае достаточно убрать i из строки удаления

Dilettante_Pro

22.10.2018, 18:10

поможет если ее перед циклом сохранить в переменную
Дык об этом я и говорю. Это уже не простая замена.

рони

22.10.2018, 18:11

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>

рони

22.10.2018, 18:12

j0hnik,
строки 4 и 5 лучше поменять с друг другом. :)

Dilettante_Pro

22.10.2018, 18:16

в его случае достаточно убрать i из строки удаления

А также All
let a = document.querySelectorAll('.td1').length;

for (var i = 0; i < a; i++) {
document.querySelector('.td1').parentNode.parentNo de.parentNode.remove();
};

рони

22.10.2018, 18:17

Dilettante_Pro,
зачем дважды искать одно и тоже

j0hnik

22.10.2018, 18:18

рони, вот так симпатичней
document.getElementsByTagName('button')[0].addEventListener('click', e=>
document.querySelectorAll('.td1').forEach(el=> el.closest('table').remove()));

рони

22.10.2018, 18:19

<!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.querySelectorAll('.td1');
let x = a.length;
for (let i = 0; i < x; i++)
{
a[i].parentNode.parentNode.parentNode.remove();
}
}

</script>
</body>
</html>

Dilettante_Pro

22.10.2018, 18:20

зачем дважды искать одно и тоже
Это не я - это ТС. В моем примере такого нет.

рони

22.10.2018, 18:20

j0hnik,
Dilettante_Pro,
:dance: :lol: :victory:

atanov

23.10.2018, 10:44

j0hnik,
Dilettante_Pro,
рони,
Спасибо большое!
Да, моя ошибка в том, что коллекция меняется. Я то думал, что при удалении элемента, он сам из DOM исчезает, но ссылка на него и он сам присутствует. Вот здесь об это идёт речь:
https://developer.mozilla.org/ru/docs/Web/API/ChildNode/remove

Dilettante_Pro

23.10.2018, 11:44

atanov,
В этом примере
здесь об это идёт речь:

var elem = document.querySelector("#one");
elem.remove();
alert(document.querySelector("#box").innerHTML); //Исчез блок #one
alert(elem); //Но как видите, сам объект еще жив
используется document.querySelector, который создает ссылку на найденный элемент. Эта ссылка - переменная elem - существует независимо от того, удален сам элемент или нет. Если после удаления ее "освежить":
elem = document.querySelector("#one"); - то она станет null

Вы же использовали document.getElementsByClassName(), который создает "живую" коллекцию элементов, которая переформировывается при удалении определенных элементов из коллекции.
К тому же вы еще и самостоятельно при каждом удалении перечитывали коллекцию.