how to delete element created with jquery?

Question

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

just somebody · Accepted Answer · 2010-06-13 14:13:17Z

11

+150

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

edited Jun 13, 2010 at 14:13

answered Jun 11, 2010 at 13:00

just somebody

19.4k6 gold badges55 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mehdi Over a year ago

could you please show me some code ? you mean like $("#close").live('click', function(){}); if you mean that it's not working either .

mehdi Over a year ago

it's not working . this you test that ? is it working for you ?!

mehdi Over a year ago

but it's not working for me here is mine mymagazine.ir/index.php/main/detail/36 - please find " here is jquery issue" sentence in site because site language is Persian

just somebody Over a year ago

well, I can see google.load("jquery", "1.2.6"); in that page. it's possible it didn't work in that version. anyway, does the snippet i posted work for you as is? if yes, try it again with 1.2.6. does it break then? it's a simple matter of basic possible cause elimination.

mehdi Over a year ago

i use that click handler in plug-in maybe that's my problem ?! and if i use click handler outside my plug-in that way using plug-in is useless

|

Sarfraz · Accepted Answer · 2010-06-13 13:56:17Z

3

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

edited Jun 13, 2010 at 13:56

answered Jun 13, 2010 at 13:42

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Comments

Mervyn · Accepted Answer · 2010-06-11 13:31:48Z

2

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*/ });

answered Jun 11, 2010 at 13:31

Mervyn

1,0619 silver badges12 bronze badges

Collectives™ on Stack Overflow

how to delete element created with jquery?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related