Question

{{1}}

我希望用户双击该元素以将其删除。因此，如果用户双击第二个“textarea”框，则该特定元素将被删除。我上面的代码和我到目前为止一样多。不确定我做错了什么，非常感谢你的帮助。

Answer 1

将它们全部包装到容器中，在容器上设置处理程序并使用event.target。

<div id="wrapper">
    <textarea rows = "4" cols = 15" class = "sect"></textarea>
    <textarea rows = "4" cols = 15" class = "sect"></textarea>
    <textarea rows = "4" cols = 15" class = "sect"></textarea>
    <textarea rows = "4" cols = 15" class = "sect"></textarea>
</div>

var wrapper = document.querySelector('#wrapper');
wrapper.addEventListener('dblclick', function ( event ) {
    wrapper.removeChild(event.target);
});

Answer 2

@Shilly提供了一个很好的简单javascript答案。一个好的jQuery解决方案（因为你在这个问题上有jQuery标签）可能是：

$('.sect').on('dblclick', function() {
    $(this).remove();
});

Answer 3

如果您使用的是纯JavaScript，可以这样做：

var x = document.getElementsByClassName("sect");

for(var i = 0;i < x.length;i++){
  x[i].addEventListener("dblclick", function (e) {
      this.parentNode.removeChild(this);
  });
}

Answer 4

您应该在每个eventListener元素（或任何您想要的内容）上添加.sect并删除event.target：

Native JS：

var elts = document.querySelectorAll(".sect");
for (var i = 0; i < elts.length; i++) {
    var elt = elts[i];
    elt.addEventListener('dbclick', function(evt) {
        document.body.removeChild(evt.target);
    }
}

jQuery（因为我在编写问题时标记了jQuery）：

$(document).on('dbclick', '.sect', function() {
    $(this).remove();
});

用户删除特定的子元素

4 个答案: