爲什麼.remove（）在我的設置中不起作用？

我目前正在做jQuery的第一步，並與.remove()有問題。有類似問題的人已經有很多問題，但他們不幫助我。爲什麼.remove（）在我的設置中不起作用？

在HTML文件中，我有一個表格和以下div，它用作警告框並顯示錶單是否正確驗證。在原始狀態下，div包含一個用於關閉它的按鈕。

<div id="my-form-alert-box"> 
    <button id="my-form-alert-button" type="button" class="close">x</button> 
</div>

當第一次加載HTML頁面時，不應顯示警告框。這就是爲什麼我添加以下CSS：

<style type="text/css"> 
    #my-form-alert-box {display: none;} 
</style>

當表單被提交和確認，我追加some text這div，然後會顯示警告框。當我使用按鈕關閉警報框時，它會消失，但不會刪除some text。爲什麼會這樣？

這裏是我的jQuery代碼：

$(document).ready(function() { 

    var $myFormAlertBox = $('#my-form-alert-box'); 
    var $myFormAlertBoxParagraph = $('#my-form-alert-box p'); 

    $('#my-form-alert-button').on('click', function(event) { 

     $myFormAlertBoxParagraph.remove(); 
     $myFormAlertBox.hide(); 

    }); 

    $('#my-form').on('submit', function(event) { 

     $.ajax({ 
      // ... 
      success: function(data) { 

       // The content of the alert box should be removed 
       // and the alert box itself should be hidden also when 
       // the form gets submitted again and not only when the 
       // button is clicked 
       $myFormAlertBoxParagraph.remove(); 
       $myFormAlertBox.hide(); 

       // data contains <p>some text</p> 
       $myFormAlertBox.append(data).show(); 
      } 

     }); 

     event.preventDefault(); 

    });   

});

追加數據工作正常，但刪除它沒有。你可以幫我嗎？非常感謝你！

來源

2012-11-21 pemistahl

你能從ajax請求中顯示你從'data'中獲得的完整內容嗎？ – devnull69

您的$ myFormAlertBoxParagraph的初始任務將失敗，因爲您的標記在調用時沒有段落。將'佔位符'段添加到標記中應該可以修復它。這解釋了爲什麼.remove（）會失敗。

爲了您的AJAX技術，嘗試這樣的事情，以保持與他們的新價值分配變量：

//... 
$.ajax({ 
    // ... 
    success: function(data) { 
     // Remove the existing paragraph. 
     $myFormAlertBoxParagraph.remove(); 

     // This updates the paragraph object with the new one. 
     $myFormAlertBoxParagraph = $(data); 

     // Add the new paragraph and ensure the alert box is visible. 
     $myFormAlertBox.append($myFormAlertBoxParagraph).show(); 
    } 
}); 
//...

這將從警告框刪除段落標記，並添加新的。沒有必要隱藏（），然後立即顯示（）。但是，在.append（）之後添加.show（）會覆蓋您，如果它已被您的點擊事件隱藏起來。

來源

2012-11-21 20:25:54 Selosindis

我不想在整個'div'上使用'.empty（）'，因爲那樣按鈕也會被移除。但我想保留按鈕，只刪除段落。 – pemistahl

我的錯誤。我沒有仔細閱讀標記。我已經更新了現在適合你的答案。 – Selosindis

您的代碼有效，謝謝。正如其他答案之一所述，我的問題主要與僅使用一個選擇器並將其分配給一個變量有關。你的代碼部分解決了這個問題。 – pemistahl

jQuery對象不存在。您甚至在追加之前創建$ myFormAlertBoxParagraph對象。所以這個對象是空的，將永遠是空的，因爲你永遠不會重新分配它。

來源

2012-11-21 20:35:54 devnull69

你說得對。將選擇器分配給變量是錯誤的。 – pemistahl

我認爲你的選擇器在你更新內容之前正在運行。最初運行時，選擇器只能看到裏面有什麼。

來源

2012-11-21 20:36:01

你說得對。當我沒有將選擇器分配給變量時，我的問題就消失了，但是每次都直接使用選擇器。但我讀過一些地方，將選擇器分配給變量比總是調用新的選擇器更高效。真的嗎？ – pemistahl

確實如此 - 但這會及時凍結價值。如果值不變，則使用變量會更有效，而不是使用每次使用時必須執行的選擇器。內容更改後，您需要獲得新的價值。 –

這隻有在您不更改反映在jQuery對象中的DOM部分時纔有效 – devnull69

爲什麼.remove（）在我的設置中不起作用？

回答

相關問題