CODEWITHSUNDEEP
jquery
mehdi
mehdi

Reputation: 9502

how to delete element created with jquery?

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

Upvotes: 5

Views: 12738

Answers (3)

just somebody
just somebody

Reputation: 19247

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'))
        ;
    }
});

Upvotes: 11

Sarfraz
Sarfraz

Reputation: 382696

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

Upvotes: 3

Mervyn
Mervyn

Reputation: 1051

You should use the live method instead of click. It will allow you to add/remove elements without changing their behaviour

$("element").live("click", function() { /*do things*/ });

Upvotes: 2

Related Questions