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()和click()。

事件处理程序中的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();
  });
});

查看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/（和花哨的删除图标）

jquery检测并删除单击的元素

8 个答案: