如何在不刷新頁面的情況下從DOM中刪除prepend / append元素

Question

我正在使用bootstrap popover，我想向DOM中添加某些元素。 我使用以下命令在標題中添加了一個附加元素：

$('div.popover').prepend($('<h3>').html('Accounts Already exists').addClass('main-header-title'));
$('.main-header-title').append('<span class="close" id="cross-button">&times;</span>');

但是，如果我不刷新頁面，則('div.popover')會始終在<h3>元素之前，並且我在彈出窗口中看到重復的標題。 類似於下面的屏幕截圖：

誰能幫助我將元素設置為null，以便當我再次搜索（不刷新）時，它不會顯示重復的標題名稱。

謝謝！

Answer 1

您只能使用DOM中尚不存在的內容進行追加

if ($('h3.main-header-title').length==0) {
     $('div.popover').prepend($('<h3>').html('Accounts Already exists').addClass('main-header-title'));
     $('.main-header-title').append('<span class="close" id="cross-button">&times;</span>');
}

您只能使用javascript來實現此目的

var element =  document.getElementsByClassName("main-header-title");
if (element.length ==0)
{
 $('div.popover').prepend($('<h3>').html('Accounts Already exists').addClass('main-header-title'));
         $('.main-header-title').append('<span class="close" id="cross-button">&times;</span>');
}

或者，您也可以在將它們添加到DOM后的一段時間（例如1秒）后將其刪除

setTimeout(function(){
$("h3.main-header-title").remove();
// or $("h3.main-header-title").fadeOut(100); for animated removal
},1000);

為了獲得更好的用戶體驗，如果要重新顯示彈出窗口，請按照這種方式進行操作。

if ($('h3.main-header-title').length==0) {
         $('div.popover').prepend($('<h3>').html('Accounts Already exists').addClass('main-header-title'));
         $('.main-header-title').append('<span class="close" id="cross-button">&times;</span>');
    }
else {
         $(h3.main-header-title).fadeOut(200);
         setTimeout(function(){$(h3.main-header-title).fadeIn(200);},500)
}

希望這可以幫助！