Удаление динамически вставленного HTML с помощью jQuery

Question

Я пытаюсь динамически создавать и удалять элементы из списка, это работает просто отлично ... вроде, я могу удалять предметы и создавать предметы, но как только элемент был создан, я не могу удалить его снова, но могу удалить элементы, присутствующие при загрузке страницы.

Вот мой код

<div class="list">
    <div class="item">
        <input type="text" value="" />
        <a href="" class="removeitem">Remove this item</a>
    </div>
    <div class="item">
        <input type="text" value="" />
        <a href="" class="removeitem">Remove this item</a>
    </div>
    <a href="" class="additem">Add item to list</a>
</div>

<script type="text/javascript">
// Add item to list
$('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    return false;
});

// Remove item from list
$('.removeitem').click(function(){
    $(this).prev().parent().remove();
    return false;
});
</script>

Я могу удалить 2 оригинальных предмета, но когда я создаю новые, они не может быть удалено

Answer 1

Вам нужно использовать живые события вместо обычного стиля, который вы используете в данный момент.

События нажатия привязываются к нагрузке, и в этот момент присутствуют только исходные элементы для привязки.

Вы бы использовали живые события, как это:

<script type="text/javascript">
// Add item to list
$('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    return false;
});

// Remove item from list
$('.removeitem').live("click", function(){
    $(this).prev().parent().remove();
    return false;
});
</script>

Использование прямых событий связано с накладными расходами (он должен отслеживать все события в DOM и проверять, соответствуют ли они, я полагаю). Поэтому используйте их только при необходимости.

Answer 2

Изменение:

$('.removeitem').click(function(){
    $(this).prev().parent().remove();
    return false;
});

до:

$('.removeitem').live("click", function(){
    $(this).prev().parent().remove();
    return false;
});

Answer 3

Другой вариант для живых событий - прикрепить событие click к вашему шаблону:

$('.additem').click(function(){
   var template = $($(this).prev().get(0)).clone();
   template.insertBefore($(this));
   $(template).click( function() { 
      $(this).prev().parent().remove();
      return false;
   };
   return false;
});

Таким образом, вы не имеете дело с накладными расходами на живые события. Если вы решите сделать это, вы можете использовать код удаления в функции, например:

<script type="text/javascript">
  function removeitem() {
      $(this).prev().parent().remove();
      return false;
  }
  // Add item to list
  $('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    $(template).click(removeitem);
    return false;
  });
  // Remove item from list
  $('.removeitem').click(removeitem);
</script>

Answer 4

Это работает?

$('.removeitem').live("click", function(){
$(this).parent('div.item').remove();
return false;
});

Другое использование .live () - хорошая идея, как вы уже знаете.