動的に挿入されたhtmlをjQueryで削除する

Question

リストからアイテムを動的に作成および削除しようとしています。 はうまくいきます...アイテムを削除してアイテムを作成できます。作成しましたが、もう一度削除することはできませんが、ページが読み込まれたときにアイテムを削除することができます。 ここで

は、私は2元の項目を削除することができますが、私は新しいものを作成するとき、彼らはあなたではなく、通常のスタイルよりも、あなたをlive eventsを使用する必要が

Answer 1

を削除することはできません 私のコード

<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> 

です現時点で使用しています。

クリックイベントは、ロード時にバインドされます。この時点で、元のアイテムのみがバインドされます。

あなたはこのようにライブイベントを使用します。ライブイベントを使用するオーバーヘッドがあり

<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

は、この仕事をしていますか？

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

あなたはすでに知っているように、良いアイデアがある）（.live使用して他。

Answer 4

あなたのテンプレートにクリックイベントを添付することであろうイベントを生きるために他のオプション：あなたはライブイベントのオーバーヘッドを扱っていない

$('.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>