I have a DIV hierarchy with classes associated, but not identifiers. How to remove the item that is clicked?
<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>
$('div .minibox').click(function(e){ $(e.target).remove(); });
$('.minibox').click(function() { $(this).remove(); });
jQuery document.ready() div
div
$(document).ready(function() { $('.minibox').click(function(e){ $(this).remove(); }); });
jQuery remove() click().
this , .
this
<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>
<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
$(document).ready(function() { $('.minibox').click(function () { $(this).remove(); }); });
remove().
jQuery , :
$(".minibox").click(function(){ $(this).remove(); });
jsfiddle.
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 }); });
Demo with fadeOut animation: http://jsfiddle.net/qJHyL/1/ (and the icon for successful deletion)