Question

我目前正在使用以下内容：

var $alertdiv = $('<div id = "alertmsg"></div>');
$alertdiv.text("Profile Image Updated");
$alertdiv.bind('click', function() {
    $(this).slideUp(200);
    });
    $("#alertmsg").slideDown("slow"); 
    setTimeout(function() { $alertdiv.slideUp(200) }, 3000);
}

但如果配置文件再次更新，我注意到代码每次都添加一个新的alertmsg div，第一个设置为display：block，因此它始终可见。是否可以从代码中删除div（已经尝试过：

var elem = document.getElementById("#alertmsg");
elem.parentNode.removeChild(elem);

无效）或仅运行if / else语句，如果div已经存在，则不再创建div？我试过这个，但是再一次，没有快乐（我对JS不好）。

提前致谢

Answer 1

一种解决方案是在执行slideUp后删除div。

setTimeout(function() { $alertdiv.slideUp(200, function() { $alertdiv.remove(); }) }, 3000);

Answer 2

if语句是否已经存在

if($('#alertmsg') === undefined)

和 Matthijs Bierman 已经拥有此功能，但要删除它，您只需$('#alertmsg').remove()

要把它们放在一起，你就可以了

if($('#alertmsg') === undefined)
    var $alertdiv = $('<div id = "alertmsg"></div>');
    $alertdiv.text("Profile Image Updated");
    $alertdiv.bind('click', function() {
        $(this).slideUp(200);
        });
        $("#alertmsg").slideDown("slow"); 
        setTimeout(function() { $alertdiv.slideUp(200) }, 3000);
    }
}

Answer 3

var div = $('<div />', {
        id   : 'alertmsg',
        text : 'Profile Image Updated',
        on   : {
            click : function() {
                $(this).stop().slideUp(200, function() {
                    $(this).remove();
                });
            }
        }
}).appendTo('body').end()
  .slideDown('slow').delay(3000).slideUp(200, function() {
    $(this).remove();
});

FIDDLE

如果它滑出视野后删除div？

3 个答案: