Я не могу удалить все абзацы на странице через JavaScript

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<p>1
<p>2
<p>3
<p>4
<p>5
<p>6
<p>7
<p>8
<p>9
<p>10
<p>11
<p>12
<script>
    // When the document is clicked, codes below should remove all the paragraphs in the page.
    // There are 12 paragraphs in the page, but codes below can just remove 6 of them.
    document.addEventListener('click', function () {
        var i, allParagraphElements = document.getElementsByTagName('p');
        console.log('allParagraphElements.length: ' + allParagraphElements.length);
        for (i = 0; i < allParagraphElements.length; i += 1) {
            console.log('i: ' + i);
            allParagraphElements[i].parentNode.removeChild(allParagraphElements[i]);
        }
    }, false);
</script>

См. коды на jsFiddle: http://jsfiddle.net/7NmRh

Как я могу решить эту проблему? Спасибо.


addeventlistener dom iteration getelementsbytagname removechild
person weilou    schedule 30.07.2012    source источник
comment
Fiddles — это хорошо, но пользователям не нужно щелкать мышью только для того, чтобы увидеть основы вашего кода. Пожалуйста, разместите код как часть вопроса, где это возможно.   -  person Mitya    schedule 30.07.2012
comment
что означает <p>1? Где заканчивается тег p?   -  person d4rkpr1nc3    schedule 30.07.2012
comment
@ d4rkpr1nc3: Закрывающие теги </p> необязательны. У вас не может быть вложенных элементов <p>. w3.org/TR/html-markup/p.html#p< /а>   -  person    schedule 30.07.2012

Ответы (2)


arrow_upward
5
arrow_downward

Вы повторяете сверху вниз:

Первая итерация: двенадцать абзацев, индекс = 0

абзац с индексом 0 удален, а абзац 1 теперь с индексом 0

Вторая итерация: одиннадцать абзацев, индекс = 1.

абзац в индексе 1 удален, а абзац 2 теперь находится в индексе 1

Вы видите, что происходит не так? Вы удаляете только половину абзацев

Повторите наоборот, и все абзацы будут удалены.

JSFIDDLE

person Community    schedule 30.07.2012

arrow_upward
3
arrow_downward

.getElementsByTagName возвращает активный список узлов, который автоматически обновляется при внесении изменений в базовое поддерево, которое оно представляет. По сути, когда вы удаляете элементы, .length также изменяется, и цикл заканчивается «преждевременно».

Вместо этого вы можете использовать .querySelectorAll для получения статического нодлиста.

http://jsfiddle.net/7NmRh/1/

allParagraphElements = document.querySelectorAll('p');

Вы также можете преобразовать список узлов в массив, который также ведет себя как статический список узлов:

allParagraphElements = [].slice.call( document.getElementsByTagName('p') );

http://jsfiddle.net/7NmRh/4/

person Esailija    schedule 30.07.2012
comment
Некоторые версии IE не знают о addEventListener. Вы должны принять это во внимание - person d4rkpr1nc3; 30.07.2012
comment
@ d4rkpr1nc3 это не мой код, это код ОП. Я здесь не для того, чтобы просматривать нерелевантные части кода OP, если они действительно неверны: P - person Esailija; 30.07.2012