jquery检测并删除单击的元素

Question

我有一个DIV的层次结构与类相关但不是ID。 如何删除被点击的项目？

<div>
    <div class="minibox" onclick="remove_me()">Box1</div>
    <div class="minibox" onclick="remove_me()">Box1</div>
    <div class="minibox" onclick="remove_me()">Box1</div>
    <div class="minibox" onclick="remove_me()">Box1</div>
    <div class="minibox" onclick="remove_me()">Box1</div>
</div>
<script>
    function remove_me(){
    ///remove the clicked div
    }
</script>

Answer 1

$('div .minibox').click(function(e){
    $(e.target).remove();
});

Answer 2

$('.minibox').click(function() { $(this).remove(); });

Answer 3

在jQuery document.ready（）事件中，您需要将单击处理程序绑定到div

$(document).ready(function() {
    $('.minibox').click(function(e){
        $(this).remove();
    });
});

查看jQuery remove（）并单击（） 。

事件处理程序中的this引用了被单击的元素。

Answer 4

更改

 <div class="minibox" onclick="remove_me()">Box1</div>

至

 <div class="minibox" onclick="remove_me(this)">Box1</div>

然后用

<script>
 function remove_me(elm){
   $(elm).remove();
}
</script>

Answer 5

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>

然后你会用

$(".box").bind("click", function() {

  $(this).fadeOut(500, function() { 
    // now that the fade completed
    $(this).remove(); 
  });

});

JSBIN中的示例

Answer 6

$(document).ready(function() {
  $('.minibox').click(function () {
    $(this).remove();
  });
});

检查删除（） 。

Answer 7

如果您可以使用jQuery注册您的活动，它就像：

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

关于jsfiddle的代码示例。

Answer 8

你的HTML：

<div class="box">some content</div>
<div class="box">some content</div>
<div class="box">some content</div>
<div class="box">some content</div>
ect...

你的jQuery

$(function(){ //make sure your DOM is ready
$("div.box").click(function(){ // bind click on every div that has the class box
  $(this).remove(); //remove the clicked element from the dom
});
});

用fadeOut动画演示： http ： //jsfiddle.net/qJHyL/1/ （和花式删除图标）