demo

Question

我正在尝试删除jquery onclick插入的div。由于某种原因它只是没有工作我试过remove（）;隐藏（）; CSS（）;空（）;他们都没有工作..所以这是我的js功能

function callme()
{
var content = '<div id="floating_box" class="fb">'
'sdfsdfsdfsdfsfsddsfsfsdfsdfsdfsfsdfsdfsdfsfsdfsd'
'</div>';
jQuery('body.floating_box').empty();
jQuery('body').append(content);
}

这是我的HTML代码

<div id="notify" class="nn" onclick="callme()">
 <span id="nbox" class="nb">
<img src="gn16.png">
<span id="ntext" class="nt">23</span>
</span>
</div>

Answer 1

使用jQuery('#floating_box')

您正在使用ID，但未将其作为一个引用..

您需要使用.remove()方法，因为您使用.empty()创建了多个具有相同ID的元素无效

看看这个demo

<强> 更新

在评论之后，我发现您希望第一次单击以创建元素，然后单击以显示/隐藏它...

使用此代码

$('#notify').click(
function (){
    if ($('#floating_box').length > 0) // it exists
    {
        jQuery('#floating_box').toggle(); // show/hide\
    }
    else //does not exist 1st time only..
    {
        var content = '<div id="floating_box" class="fb">popup</div>';
        jQuery('body').append(content);
    }
});

并从元素中删除onclick="callme" ..

Answer 2

demo

function callme()
{
    var content = '<div id="floating_box" class="fb">' +
    'sdfsdfsdfsdfsfsddsfsfsdfsdfsdfsfsdfsdfsdfsfsdfsd' +
    '</div>';
    jQuery('#floating_box').toggle();
    if (!$('#floating_box').length)
      jQuery('body').append(content);
}

Answer 3

var content = '<div id="floating_box" class="fb">' +
'sdfsdfsdfsdfsfsddsfsfsdfsdfsdfsfsdfsdfsdfsfsdfsd' +
'</div>';

参见 + ??

jQuery('body.floating_box').remove(); // edit: sorry my mistake
jQuery('body #floating_box').remove(); // better? should remove all elements within <body> with the id "floating_box"

应该没事。

Answer 4

您没有看到float_box被删除，因为每当您调用callme函数时都会添加新版本的floating_box div。

 function callme() {
     var $floatingbox = jQuery("#floating_box");
     if ( $floatingbox.length ) {
         $floatingbox.remove();
     }
     else {
        var content = '<div id="floating_box" class="fb">' +
            'sdfsdfsdfsdfsfsddsfsfsdfsdfsdfsfsdfsdfsdfsfsdfsd' +
            '</div>';  
        jQuery('body').append(content);  
     }
 }

这将检查floating_box div是否存在，并将其删除，否则添加它。

无法删除jquery插入的div

4 个答案:

demo