jquery檢測和刪除點擊的元素

我有一個DIV與類關聯但不是ID的層次結構。我怎樣才能刪除被點擊的物品？jquery檢測和刪除點擊的元素

<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>

來源

2011-03-14 Shahid Karimi

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

來源

2011-03-14 14:26:02

<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

來源

2011-03-14 14:26:33 balexandre

爲什麼.fadeIn（）？ – meo 2011-03-14 14:29:49

'fadeIn'是一個錯字，它是'fadeOut'並且增加了一個例子，這個建議是給出一個很好的移除效果，所以它不會只是「消失」......這都是關於UI技術的，我習慣於讓用戶知道發生了什麼，而且我永遠不會像消失div/table row /其他元素一樣，而不會消失的簡單效果。 – balexandre 2011-03-14 14:42:29

當然可以。看看我的例子。用戶應該知道在點擊之前會發生什麼。但fadeOut會更喜歡像我一樣刪除;）至少在回調中刪除。在你的例子中，淡入淡出的動畫沒有時間完成，因爲元素將被刪除。 – meo 2011-03-14 14:44:56

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

來源

2011-03-14 14:26:56 JaredMcAteer

裏面的jQuery的document.ready()事件，你需要點擊處理程序綁定到div的

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

退房jQuery的remove()和click()。

事件處理函數內部的this引用被點擊的元素。

來源

2011-03-14 14:27:17

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

結賬remove()。

來源

2011-03-14 14:27:28 Kon

如果你可以使用jQuery來註冊你的事件很容易爲：

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

代碼示例上jsfiddle。

來源

2011-03-14 14:27:31

您的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 
}); 
});

演示與淡出動畫： http://jsfiddle.net/qJHyL/1/（和花哨的刪除圖標）

來源

2011-03-14 14:27:43 meo

變化

<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>

來源

2011-03-14 14:28:42

jquery檢測和刪除點擊的元素

回答

相關問題