Question

我目前正在浪费时间创建一个应用程序，该应用程序使用javascript在html主体上绘制某些对象。我已经创建了一些标签面板，它们按预期绘制。它们都属于同一个类“overlay messageBox”。

有一个功能可以删除已经绘制的messageBoxes。

    var labelsHtml = document.getElementsByClassName('overlay messageBoxName');
    try {
        var lenght = labelsHtml.length;
        for (var i = 0; i < lenght; i++) {
            labelsHtml[i].parentElement.removeChild(labelsHtml[i]);
        }
    } catch (e) {
        alert(e);
    }

注意：labelsHtml计数得到了正确的值。有4个绘制的框，计数= 4。

问题：只删除了四个MessageBox中的两个，并抛出异常：

未定义或空引用的parentElement属性不能被检索。

此外，我可以在硬编码时检索所有条目的innerHtml，因此它们不为空或未完成。我在这里错过了什么吗？

清除整个HTML正文是没有选择的，因为它包含其他类的多个元素。

Answer 1

问题：四个MessageBox中只有两个被删除而且有一个例外抛出：

labelsHtml是一个实时NodeList，因此当您从labelsHtml中删除该值时，其length属性会发生变化。

您可以先将Array转换为

Array.from( labelsHtml ).forEach( item => item.parentNode.removeChild( item ) );

Answer 2

尝试以下方法：

使用jQuery：

$('.myClass').remove()

使用es6：

const removeElements = (elms) => Array.from(elms).forEach(el => el.remove());

// Use like:
removeElements( document.querySelectorAll(".remove") );

顺便说一下这是重复的：

Removing elements by class name?

无法使用removeChild从html正文中删除元素

2 个答案: