Question

我有以下代码但是如何点击父div删除的删除按钮？

     function removeDiv(){
            $(this).parent('div').remove();
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
        <div>
            <div><button onClick="removeDiv()">button1</button></div>
        </div>
        <div>
            <div><button onClick="removeDiv()">button2</button></div>
        </div>
    </div>

Answer 1

将当前元素上下文this传递给removeDiv函数。

<div><button onClick="removeDiv(this)"></button></div>

将功能更改为

function removeDiv(elem){
    $(elem).parent('div').remove();
}

然而，当您使用jQuery时，您应该使用它绑定事件，这是一个示例，我使用Class Selector (“.class”)将事件处理程序与元素绑定。

＆＃13;

jQuery(function($) {
  $('.removeDiv').on('click', function() {
    $(this).parent('div').remove();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div>
      <button class="removeDiv">removeDiv</button>
    </div>
  </div>
  <div>
    <div>
      <button class="removeDiv">removeDiv</button>
    </div>
  </div>
</div>

＆＃13;

Answer 2

使用jquery只需添加点击事件：像blew.Its将删除closest parent div

两种方法：

   1.$(this).parent('div').remove();

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

＆＃13;

$(document).ready(function (){
$('button').click(function (){
        $(this).parent('div').remove();
  //$(this).closest('div').remove(); its also working
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <div><button >remove1</button></div>
    </div>
    <div>
        <div><button >remove2</button></div>
    </div>
</div>

＆＃13;

Jquery onclick删除父div

2 个答案: