Menu
i have write this block of code in jquery to create three element after some events
$('body').append(
tmp= $('<div id="tmp"></div>')
);
$('<div id="close" />').appendTo("#tmp");
$('<div id="box-results" />').appendTo('#tmp');
this three elements are created normally and added to my DOM but i want to remove them with some function like this :
$("#close").click(function(e){
e.preventDefault();
$("#tmp").remove();
//$("#overlay").remove();
});
and after i click close div noting happen ! what's wrong with my code ?
here is online example : mymagazine.ir/index.php/main/detail/36 - please find " here is jquery issue" sentence in site because site language is Persian
203
jQuery remove() Method The remove() method removes the selected elements, including all text and child nodes. This method also removes data and events of the selected elements. Tip: To remove the elements without removing data and events, use the detach() method instead.
Approach: Select the HTML element which need to remove. Use JavaScript remove() and removeChild() method to remove the element from the HTML document.
Your clear() function is not global because it is defined inside your document ready handler, so your onclick="clear()" can't find it. You need to either move the function outside the ready handler (making it global), or, better, bind the click with jQuery: $(document). ready(function(){ $(this).
you need to add the click handler on #close after you insert the element into the document.
edit providing the requested demo; tested in ff36:
<html>
<head>
<title>whatever</title>
<style type="text/css">
div {
border: 1px solid black;
padding: 0.3em;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('body').append($('<div id="tmp"/>'));
$('<div id="close">click me</div>').appendTo("#tmp");
$('<div id="box-results">contents</div>').appendTo('#tmp');
$('#close').bind('click', function ()
{
$('#tmp').remove();
return false;
});
});
</script>
</head>
<body>
</body>
</html>
edit
change your plugin's code from
$.ajax({
...
success: function ()
{
$('<div id="close"/>').appendTo($('#tmp'));
}
});
$('#close').click(function (e) ...);
to
$.ajax({
...
success: function ()
{
$('<div id="close"/>')
.click(function (e) ...)
.appendTo($('#tmp'))
;
}
});
Because the elements with ids #tmp and #close are created dynamically, you can't use the click on them directly, you need the live() method instead:
$("#close").live('click', function(e){
$("#tmp").remove();
return false;
});
Live() Description:
Attach a handler to the event for all elements which match the current selector, now or in the future.
As can be seen your element is created dynamically (future) not when page was loaded.
More Info Here
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
