用户删除特定的子元素

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

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

来源

2015-10-15 chris

你们为什么试探，看看是否DblClick事件属性等于一个元素？ –

你想要jQuery解决方案还是纯javascript解决方案？你用jQuery标记了这个问题，但是在代码示例中不显示任何jQuery。 –

将它们全部包装到容器中，在容器上设置处理程序并使用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); 
});

来源

2015-10-15 16:00:14 Shilly

请注意，在这种情况下，wrapper div不是必需的（您可以迭代'sect'元素并单独附加处理程序，如OP示例中所做的那样），但可以为直接javascript解决方案简化代码。 –

我真的试图避免向元素添加单独的处理程序，因为如果我想要混合不同的模块以便稍后使用相同的处理程序，它会扩展到某个点，使用更多的内存并迫使我编辑循环。对于4个元素无关紧要，但是我认为在恰当的时候使用事件冒泡方法给直接父母是一个好习惯。它相当于jquerys委托'$（container）.on（event，child，fn）'，它是根据受保护的直接vs委托SO回答的更快的处理程序。 – Shilly

@Shilly提供了一个很好的普通javascript的答案。一个良好的jQuery的解决方案（因为你对这个问题的jQuery标签）可能是：

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

来源

2015-10-15 16:07:15

如果使用纯JavaScript可以做到这一点的方法：

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

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

来源

2015-10-15 16:09:41

应在每个添加eventListener.sect元素（或任何你想要的），然后卸下event.target：

本地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的时候我写的问题）：

来源

2015-10-15 16:11:50 pistou

用户删除特定的子元素

回答

相关问题