Динамическое добавление и удаление элемента из HTML DOM

Я работаю над HTML-страницей, на которой есть список элементов в таблице, и при нажатии на элемент создается новая вкладка с указанием деталей щелкнутого элемента. Я использую вкладки jquery-ui для динамического создания вкладок. Мне нужно открыть вкладку для элемента, только если табуляция не существует для этого элемента. Я использую приведенный ниже код для достижения этогоДинамическое добавление и удаление элемента из HTML DOM

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

Я использую вкладки с уникальным идентификатором для каждого элемента. Этот код работает при первой загрузке вкладки, проблема заключается в том, что у меня также есть кнопка X, чтобы закрыть вкладку, и при нажатии кнопки f я удаляю разделение табуляции из HTML DOM с помощью функции jquery .remove(). Таким образом, вкладка удаляется, но когда я пытаюсь добавить вкладку для определенного элемента после его удаления один раз. Тогда приведенный выше код не работает, он показывает, что вкладка уже существует. И новая вкладка не создается. Как полностью удалить элемент из 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

возвращает ненулевое значение для элемента «список», даже после удаления его из DOM с помощью Jquery .remove(), тогда как в случае «DIV» элемент возвращает нуль для вышеуказанного выражения после удаления div с использованием .remove(). Поэтому я использовал элемент «Див» для проверки цели т.е. теперь я использую

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

вместо

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

источник

2015-09-30 20:00:00 Rahul

Динамическое добавление и удаление элемента из HTML DOM

ответ

Смежные вопросы