javascript - 用户删除特定的子元素

Question

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

我希望用户双击该元素以将其删除。因此，如果用户双击第二个“文本区域”框，则该特定元素将被删除。我上面的代码是迄今为止我所拥有的。不确定我做错了什么，非常感谢您的帮助。

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