javascript - 删除选定的 div

Question

脚本解释:我有一个文本区域，用户正在输入注释，这些注释被添加到 DOM(作为 div 元素)。我在该 div 中创建了一个图标，当您单击它时，我希望被单击的图标的父级从 DOM 中删除。我用 JQuery 实现了这一点，但我不能用纯 JS 来实现。我用来实现此目的的代码:

$('.fa-window-close').on('click', function(event){
                event.preventDefault();
                console.log($(this).parents('div')[0]);
                $(this).parents('div')[0].remove();

           });

我发布了一个来自 gist 的链接，它是我项目的一部分代码，因此您可以了解我想要实现的目标。

https://gist.github.com/Clickys/43856fe26ee4c061cf910a9211f0c142

基本上我想要实现的是，假设我们有一个在 DOM 中创建 div 元素的按钮。每个 div 都有一个图标(fontawesome)，如果我们单击它，则应从 DOM(目标 div)中删除所选目标，但不会从其他 div 中删除。我尝试使用 event.target 和很多东西，但遗憾的是我无法用纯 JS 解决这个问题。

我试过了

closeTolPos.addEventListener('click', function(e){
      var parentEl = e.currentTarget.parentNode.parentNode;
      parentEl.removeChild(this.parentElement);
      console.log(this.parentElement);
});

但似乎当有超过 1 个元素时，它不起作用。它仅在存在一个元素时有效。

Answer 1

我们做了一些更改，现在代码可以运行了:

 (function() {
    document.addEventListener('click',function(e) {
      if (e.target.closest('.notesDecoration')) {
        e.target.closest('.notesDecoration').parentNode.removeChild(e.target.parentNode);
      }
    });     
 })();

现在 click 事件被绑定(bind)到文档，所以当页面加载时元素存在。然后我检查点击的元素是否是最近创建并添加到 DOM 的元素。