创建一个元素并使用 JavaScript 删除它

Question

我在按钮的单击事件中使用 insertAdjacentHTML 命令将 div 标记添加到页面的一部分。现在，当单击 body 页面的其余部分时，我如何命令删除此 div（此 div 除外）？

无论我如何创建它，div 都会快速创建和删除！

let newElement = '<div id="new-element">...</div>';
document.getElementById('button').addEventListener('click', function (event) {
    document.body.insertAdjacentHTML('beforeend', newElement);
}

document.addEventListener('click', function (event) {
if (!document.getElementById('new-elemnt'element').contains(event.target) && document.getElementById('new-elemnt'element').length !== 0)
    {
        document.getElementById('new-elemnt'element').remove();
    }
});

html 文件:

<body>
    ...
    <button type="button" id="button">Create!</button>
    ...
</body>

Answer 1

在调用contains之前，您应该首先检查该节点是否存在。 getElementById 没有 return 节点列表（所以没有 .length）。它 return 是节点或 null。

其次，当您有另一个必须创建该元素的按钮时，您必须注意不要将此点击视为必须再次将其删除的新元素“外部”事件。所以取消按钮点击的传播，这样它就不会到达另一个监听器。

也一样：

const button = document.querySelector("button");

button.addEventListener("click", function(e) {
    e.stopPropagation();
    let node = document.getElementById('new-element');
    if (node) return; // It's already created
    let newElement = '<div id="new-element">new node</div>';
    document.body.insertAdjacentHTML('beforeend', newElement);
});

document.addEventListener('click', function (event) {
    let node = document.getElementById('new-element');
    if (node && !node.contains(event.target)) {
        node.remove();
    }
});

<div id="outside">outside</div>
<button>Add the DIV</button><br>

创建一个元素并使用 JavaScript 删除它

Create an element and the ability to remove it with JavaScript

html

javascript