從DOM動態添加和刪除元素DOM

我正在HTML頁面上有一個表中的項目列表，並且在單擊一個項目時會生成一個新的選項卡，其中顯示了所單擊的項目的詳細信息。我正在使用jquery-ui選項卡來動態創建選項卡。只有當該項目不存在選項卡時，我才需要打開項目的選項卡。我使用下面的代碼來實現這一點從DOM動態添加和刪除元素DOM

if(! $('#selector').length) 
{ 
    //create new tab for the item 
}

我使用具有唯一ID的標籤爲每個項目。這個代碼在第一次加載標籤時工作，問題是我也有一個X按鈕關閉標籤，並點擊f按鈕，我使用jquery .remove（）函數從HTML DOM中刪除標籤分割。這種方式標籤被刪除，但當我嘗試添加一個特定的項目後，刪除一次標籤。然後上面的代碼不起作用它顯示該選項卡已經存在。新標籤沒有被創建。如何從HTML DOM中完全刪除元素，以便上面的代碼在刪除一次後重新創建標籤。在此先感謝您的幫助

<body> 
    <div id='tabs'> 

     <ul> 

     </ul> 

    </div> 
</body> 
<script> 
    $(document).ready(function(){ 

     $("#tabs").tabs(); 

     $(document).on('click', '.clickable_sellername', function(){ 

      debugger; 
      var sellerid = parseInt(this.id.split('_')[2]); 
      var sellername = $(this).text(); 

      if($('#tabindex_'+sellerid).length == 0){ 

       $.ajax({ 
        type:"GET", 
        url :"/myadmin/loadprofile", 
        data:{ 'sellerid':sellerid }, 
        dataType:"html", 
        success: function(data){ 

         // Add a new tab 
         $("#tabs ul").append("<li id='tabindex_"+sellerid+"' ><a href='#sellertab_" + sellerid + "'>" + sellername + "</a><a href='#' id='close_"+sellerid + "' class='ui-tabs-anchor remove' role='presentation' >x</a></li>"); 

         // Add content to the newly added tab 
         $("#tabs").append("<div id='sellertab_"+sellerid+"' ></div>"); 
         $('#sellertab_'+sellerid).html(data) 

         // Refresh tabs to add newley added tab 
         $("#tabs").tabs("refresh"); 

        } 
       }); 
       return false; 
      } 
     }); 

     $(document).on('click', '.remove', function(){ 

      // Get the tab number of pressed close button 
      var sellerid = parseInt(this.id.split("_")[1]); 

      // Remove the tabindex 
      $('#tabindex_'+sellerid).remove(); 

      // Remove the tab content 
      $('#sellertab_'+sellerid).remove(); 

      //Refresh the tabs 
      $('#tabs').tabs("refresh"); 

     }); 

    });

來源

2015-09-30 Rahul

請發表您的代碼 - 它更容易讓我們理解你從做什麼。另外，根據你的描述，聽起來你應該使用委託事件處理程序。 –

請加上你的'html'結構... – Kiyarash

$('#selector').length

即使使用jQuery一個.remove（），而從DOM移除它在一個「格」的情況下，後返回一個「清單」元素的非零值元素在使用.remove（）刪除div後，它會爲上述表達式返回零。所以我用於檢查目的的「格」元素，即現在我用

if($('#sellertab_'+sellerid).length == 0)

，而不是

if($('#tabindex_'+sellerid).length == 0)

來源

2015-09-30 20:00:00 Rahul

從DOM動態添加和刪除元素DOM

回答

相關問題