Javascript 用户删除特定的子元素 window.onload=函数myFunction（）{ var x=document.getElementsByClassName（“sect”）； 对于（var i=0；i

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

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

<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>

<script>
window.onload = function myFunction(){
var x = document.getElementsByClassName("sect");
for(var i = 0;i < x[i].length;i++){
  if(x[i].parentNode.children[i].ondblclick){
      x[i].parentNode.removeChild(x[i]);
      }
   }
}
</script>

var wrapper=document.querySelector（“#wrapper”）；
wrapper.addEventListener（'dblclick'，函数（事件）{
wrapper.removeChild（event.target）；
});

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

<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);
});

---

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

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

var x=document.getElementsByClassName（“sect”）；
对于（变量i=0；i

您应该在每个

.sect

元素（或您想要的任何元素）上添加一个

事件监听器

，并删除

事件。目标

：

本地JS：

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

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

---

为什么要测试dblclick事件属性是否等于元素？您想要jQuery解决方案还是纯javascript解决方案？您用jQuery标记了这个问题，但没有在代码示例中显示任何jQuery。请注意，在这种情况下不需要包装器div（您可以迭代

sect

元素，并像OP示例中那样单独附加处理程序），但是对于直接的javascript解决方案，代码确实简化了一点。如果我能帮助的话，我真的尽量避免在元素中添加单独的处理程序，因为它会扩展louzy超过某个点，使用更多内存，并且如果我想混合使用不同的模块来使用同一个处理程序，我会强制编辑循环。对于4个元素来说，这并不重要，但我认为在适当的时候使用事件冒泡给直接父函数是一个很好的做法。它相当于jquerys delegate

$（container）.on（event，child，fn）

，根据直接与委托的受保护SO答案，这是更快的处理程序。

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);
    }
}

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