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

标签 javascript html

<分区>

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

有一个函数允许您删除已经绘制的消息框。

    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 count 得到了正确的值。有 4 个绘制的框,计数 = 4。

问题:四个 MessageBox 中只有两个被删除并抛出异常:

The parentElement property of an undefined or null reference can not be retrieved.

此外,我还可以在硬编码时检索所有条目的 innerHtml,因此它们不是空的或未定义的。我在这里遗漏了什么吗?

清除整个 HTML 正文是不可取的,因为它包含其他类的多个元素。

最佳答案

Problem: only two of four MessageBoxes get deleted and an exception is thrown:

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

您可以先将其转换为数组

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

关于javascript - 无法使用 removeChild 从 html 正文中删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47572754/

相关文章:

javascript - 一些关于导航的 Jquery/CSS 帮助

javascript - 如何在视频播放完毕后重定向到不同的 URL

php - Javascript Ajax 页面在一段时间后开始响应缓慢?

javascript - 隐藏选择选项值,以便用户无法查看它

javascript - HTML 和 JavaScript "this"

javascript - 如何通过javascript创建自动幻灯片图像?

javascript - 使用 JavaScript 的 HTML 倒计时

javascript - ui-sref-active 在多个状态

Javascript - 文档.createTextNode()

javascript - 清除所有并删除样式