ansaurus

Question

how to delete element created with jquery ?!

Answer 1

+6 A:

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"&gt;&lt;/script&gt;
 <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'))
        ;
    }
});

just somebody 2010-06-11 13:00:21

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

mehdi 2010-06-11 13:04:55

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

mehdi 2010-06-11 13:23:32

@mehdi: His answer works perfectly for me: http://bit.ly/aKEvbh

Matt 2010-06-11 13:29:15

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

mehdi 2010-06-11 15:27:09

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.

just somebody 2010-06-11 15:40:14

yes , your code is working perfectly with 1.2.6

mehdi 2010-06-11 15:45:41

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

mehdi 2010-06-11 15:49:32

you can have it inside the plugin, but need to create the element before you attach any event handlers to it (sounds logical, doesn't it? ;) i've checked your box plugin, and the error was obvious. see the updated answer.

just somebody 2010-06-13 14:14:53

your solution solve my problem tanks that's genius ;)

mehdi 2010-06-17 18:01:36

Answer 2

+1 A:

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

Mervyn 2010-06-11 13:31:48

Answer 3

A:

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

Sarfraz 2010-06-13 13:42:15

ansaurus

tags:

views:

answers:

how to delete element created with jquery ?!

related questions