Question

我希望在使用纯JavaScript或jQuery库单击其中一个子节点时删除元素。

有多个<div>具有相同的类。我已经按照StackOverflow上的答案，但没有人满足我的编码。没有工作。

下面是我的代码

function removetask(e) {
  e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}

<div class="div-main">
  <h1>task 1</h1>
  <a href="#" onclick="removetask(this)">Close</a>
</div>
<div class="div-main">
  <h1>task 2</h1>
  <a href="#" onclick="removetask(this)">Close</a>
</div>
<div class="div-main">
  <h1>task 3</h1>
  <a href="#" onclick="removetask(this)">Close</a>
</div>

Answer 1

如果你想去jQuery路线，那就是。

$(e).closest('.div-main').remove();
//or
$(e).parent().remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function removetask1 (e) {
  e.parentNode.parentNode.removeChild(e.parentNode);
}

function removetask2 (e) {
  $(e).closest('.div-main').remove();
}

function removetask3 (e) {
  $(e).parent().remove();
}
</script>
<div class="div-main">
    <h1>task 1</h1>
    <a href="#"  onclick="removetask1(this)">Close</a>
</div>
<div class="div-main">
    <h1>task 2</h1>
    <a href="#"  onclick="removetask2(this)">Close</a>
</div>
<div class="div-main">
    <h1>task 3</h1>
    <a href="#"  onclick="removetask3(this)">Close</a>
</div>

Answer 2

这是一个有效的代码。请试试。

的jQuery

$(".div-main a").click(function(e){
  e.preventDefault();
  $(this).closest(".div-main").remove();
});

HTML

<div class="div-main">
    <h1>task 1</h1>
    <a href="#"  >Close</a>
</div>
<div class="div-main">
    <h1>task 2</h1>
    <a href="#" >Close</a>
</div>
<div class="div-main">
    <h1>task 3</h1>
    <a href="#" >Close</a>
</div>

jsfiddle链接

https://jsfiddle.net/SmitRaval/st8d6y03/1/

单击子项目时删除父项

2 个答案: