Question

我正在尝试使用jQuery在按下时删除div标记的父<button>。我有这个HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
  $(".remove").click(function(event) {
      event.preventDefault();
      $(this).parents('.li').remove();
  });
</script>
<div id="1a">
    <input class="versionid" placeholder="Version Number"><button class="add">+</button><button class="remove">X</button><br>
    <br>
    <textarea class="textarea" placeholder="Changes"></textarea>
</div>

jQuery代码应该删除整个<div id="1a">块，但似乎什么也没发生。

Answer 1

$(this).parents('.li').remove();中的选择器是指您尝试选择的父级。这应该是$(this).parents('#1a').remove();，请注意从'.li'到'#1a'的更改，因为父div的ID为1a。这是JSFiddle：

https://jsfiddle.net/9jLsz6r2/

或者，您可以使用$(this).parent().remove()，如果您有多个删除按钮

，这可能会更容易

Answer 2

似乎有一个奇怪的父母要删除...因为.parents('.li') 不存在。

<div class="YOU DON'T HAVE ANY CLASS" id="1a">

也许是http://api.jquery.com/closest/：

$(this).closest('div').remove();

或而非为您的DIV分配li课程：

$(this).closest('.li').remove();

像：

$(".remove").click(function(event) {
  event.preventDefault();
  $(this).closest('div').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="li" id="1a">
  <input class="versionid" placeholder="Version Number"><button class="add">+</button><button class="remove">X</button><br>
  <br>
  <textarea class="textarea" placeholder="Changes"></textarea>
</div>

正如您从有用的评论中看到的那样，请确保使用比.closest("div")更具体的选择器，可能类似于：.closest(".parent")甚至.closest(".li")，但要确保使用该CLASS <div class="li" id="1a">

Answer 3

只需使用.closest（）方法：$（this）.closest（'。li'）。remove（）; 它从当前元素开始，然后爬上链寻找匹配元素，并在找到匹配元素后立即停止。

.parent（）仅访问元素的直接父元素，即div.msg-modification与.li不匹配。所以它永远不会达到你想要的元素。

除了.closest（）（它检查当前元素然后爬上链）之外的另一个解决方案是使用.parents（） - 但是，这会有一个警告，它一旦找到匹配就不会停止element（它不检查当前元素，只检查父元素）。在你的情况下，它并不重要，但对于你想要做的事情.closest（）是最合适的方法。

通过.remove（）删除父div。

3 个答案: