如何删除用jquery创建的元素?

时间:2010-06-11 12:58:01

标签: jquery

我已经在jquery中编写了这段代码,以便在一些事件之后创建三个元素

$('body').append(
tmp= $('<div id="tmp"></div>')
);

$('<div id="close" />').appendTo("#tmp");   
$('<div id="box-results" />').appendTo('#tmp');

这三个元素是正常创建的并添加到我的DOM中但我想用这样的函数删除它们:

$("#close").click(function(e){

e.preventDefault();
$("#tmp").remove(); 
//$("#overlay").remove(); 
});

然后我点击关闭div注意发生!我的代码出了什么问题?

这里是在线示例:mymagazine.ir/index.php/main/detail/36 - 请在网站上找到“这里是jquery问题”句子,因为网站语言是波斯语

3 个答案:

答案 0 :(得分:11)

在中将元素插入文档后,您需要在#close 上添加点击处理程序。

编辑提供所要求的演示;在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>

修改

更改插件的代码
$.ajax({
    ...
    success: function ()
    {
        $('<div id="close"/>').appendTo($('#tmp'));
    }
});
$('#close').click(function (e) ...);

$.ajax({
    ...
    success: function ()
    {
        $('<div id="close"/>')
            .click(function (e) ...)
            .appendTo($('#tmp'))
        ;
    }
});

答案 1 :(得分:3)

由于具有ids #tmp#close的元素是动态创建的,因此您无法直接使用click,您需要 live() < / strong>方法改为:

$("#close").live('click', function(e){    
  $("#tmp").remove(); 
  return false;
});

Live()说明:

  

为所有人附加一个处理程序   与当前相匹配的元素   选择器,现在或将来。

可以看出,您的元素是动态创建的(未来),而不是在加载页面时。

<强> More Info Here

答案 2 :(得分:2)

您应该使用实时方法而不是单击。它允许您添加/删除元素而不改变其行为

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