Question

所以我有一些看起来如下的html：

<div class='something unknown' id='something_unknown_1'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>
<div class='something unknown' id='something_unknown_2'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>

......等等。如何在不知道按钮ID的情况下引用触发onClick的按钮？我想最终让我的removeParent（self）方法看起来像：

buttonThatWasClicked.parent().remove();

Answer 1

您可以使用this来引用点击处理程序中单击的按钮。

$("button").click(function(){
    removeParent($(this));
});

function removeParent(buttonThatWasClicked){
    buttonThatWasClicked.parent().remove();
}

Answer 2

我会在按钮上添加一个类，这样函数就不会被绑定到页面上的每个按钮，而只会绑定到你想要的那个按钮。

<div class='something unknown' id='something unknown'>
  <button class="myClass">Remove me and my parent div</div>
</div>
<div class='something unknown' id='something unknown'>
  <button class="myClass" >Remove me and my parent div</div>
</div>

然后使用jquery类选择器绑定一个删除父节点的函数。

$(".myClass").click(function(){
    $(this).parent().remove();
});

演示：http://jsfiddle.net/cXLqK/

Answer 3

如果HTML节点上有onclick（即未通过jQuery设置）：

<div class='classA' id='idA'>
  <button onclick='removeParent(this)'>Remove me and my parent div</div>
</div>
<div class='classB' id='idB'>
  <button onclick='removeParent(this)'>Remove me and my parent div</div>
</div>

然后这将有效：

removeParent = function(e) {
    $(e).parent().remove();
}

工作示例：

http://jsfiddle.net/VEETt/

使用JQuery删除没有id或类的父级

3 个答案: