Question

我想这是一个非常基本的问题，但我无法弄清楚使用“删除”的正确方法。

我想使用Jquery创建一个删除其父容器的按钮。这是我的小提琴和代码。

到目前为止，没有任何事情发生，我甚至没有收到控制台错误。

我尝试了其他方法（而不是“父母”），包括最接近的，具有相似的结果。 Fiddle

  <div class="delete_me">
<h3>Delete Me</h3>
<div>
    <input type="text" placeholder="DELETE ME">
</div>
<button name="button" onclick="removeThis();" type="button">Delete everything in my parent div</button>

function removeThis(){
    $(this).parents('.delete_me').remove();
};

Answer 1

<强> Updated fiddle

我想您无法添加id或class，因此您必须将点击的对象传递给该函数，例如：

HTML：

<button name="button" onclick="removeThis(this);" type="button">Delete everything in my parent div</button>

JS：

function removeThis(_this){
    $(_this).parents('.delete_me').remove();
};

注意：如果您可以在其他答案中添加id或class使用解决方案，因为实际上不建议使用内联事件处理程序。

希望这有帮助。

Answer 2

此处男子：https://jsfiddle.net/leojavier/t375qrwL/4/

<div class="delete_me">
    <h3>Delete Me</h3>
    <div>
        <input type="text" placeholder="DELETE ME">
    </div>
    <button name="button" type="button">Delete everything in my parent div</button>
 </div>

JS

$('button').on('click', function(){
    $(this).parent().remove();
});

Answer 3

将代码与内联侦听器一起使用时，this的范围将变为window。你应该避免内联添加事件监听器，所以试试这样：

$('.delete_me button').on('click', function() {
  $(this).closest('.delete_me').remove();
});

Answer 4

您的功能不起作用的原因是您的this关键字没有作用于按钮*。在您的函数this中引用window而不是单击的按钮。如果您将函数设置为JQuery .on('click', function(){...})事件，this将适当地限定为单击的按钮：

HTML：

<div class="delete_me">
  <h3>Delete Me!</h3>
  <div>
    <input type="text" placeholder="DELETE ME">
  </div>
  <button id="removeBtn">Delete everything in my parent div</button>
</div>

JQuery的：

$('#removeBtn').on('click', function(){
  $(this).parents('.delete_me').remove();
});

JSFiddle Demo

* 除了在加载处理程序中声明函数以外，一旦加载处理程序完成，它就会超出范围

在Jquery中删除按钮父容器

4 个答案: