削除するユニークなdiv - jqueryイベントでライブ生成divを介して

Question

私は5秒ごとにライブアップデートでdivをトリガーするjQueryを持っています。それはうまく動作します。場合によっては、これらの更新をすぐに削除する必要があります。その上

<form> 

<div id="live1">Aha I love you too 
<input id="live1" type="hidden" value="1"><label id="livedel1">Delete 1</label> 
</div> 

<div id="live2">Thx man 
<input id="live2" type="hidden" value="2"><label id="livedel2">Delete 2</label> 
</div> 

</form> 

...と：

jQueryのは、このようにHTMLを生成します。

HTMLとjQueryの特定のIDをjQueryに送信/分離する方法が必要なので、削除することができます。これはjQueryの値ではないからです。削除は問題ではなく、jQueryが特定のIDを取得するだけです。

HTMLおよびjQueryの推奨事項は歓迎され、上部HTMLはxyコードに変更することができます。

Answer 1

最初にと同じIDを持つ複数の要素があります。これは有効なHTMLではないため、問題が発生します。

ラベルをクリックしたときにdiv要素を削除したい場合は、あなたがこれを行うことができます：

<form> 

<div id="live1" class="live">Aha I love you too 
<input id="livehidden1" type="hidden" value="1"><label id="livedel1">Delete 1</label> 
</div> 

<div id="live2" class="live">Thx man 
<input id="livehidden2" type="hidden" value="2"><label id="livedel2">Delete 2</label> 
</div> 

</form> 

のjQuery：

$('.live').on('click', 'label', function() { 
    $(this).closest('.live').remove(); 
}); 

キーが有効であるためにあなたのIDを修正することであり、親要素にクラスliveを追加します。次に、jQueryを使用してDOMを検索し、親live要素を削除できます。しかし、あなたの質問から、これがあなたが本当にやりたいことであるかどうかを知ることは難しいです。

あなたはさておき、無効なIDとは、あなたのhtmlを変更したくない場合、あなたはこのような何かをする必要があります：

$('form').on('click', 'label', function() { 
    var num = $(this).attr('id').replace(/livedel/, ''); 
    $('#live'+num).remove(); 
}); 

これは、あなたのHTMLが項目から項目に異なる場合が前提になります。あなたの構造は常に同じである場合は、IDが混乱する必要はありませんし、私は示唆していて、それはない非常に堅牢ですが、ただ、.parent()を使用することができます。

$('form').on('click', 'label', function() { 
    $(this).parent().remove(); 
}); 

Answer 2

あなたの質問はとてもやや曖昧です私は今あなたが本当に望んでいるものと仮定しています。

あなたのHTML（改良可能）に基づいて、ラベルのクリック（「削除」ラベル）が行われるたびに、次のように親要素（div）が削除されます。このようなHTMLで

$(body).on('click', 'label', function() { 
    $(this).parent().remove(); 
}); 

これは大幅など、代わりに本体のコンテナ要素にクリックイベントを委任、削除、ラベルのクラスを使用することによって改善することができる

（多少クリーナー、私見）：

<div id="container"> 
    <div class="message"> 
     Aha I love you too 
     <label class="delete">Delete 1</label> 
    </div> 
    <div class="message"> 
     Thx man 
     <label class="delete">Delete 2</label> 
    </div> 
</div> 

ザ・JavaScriptがslighlyより証拠だます行うことができる上：

$('#container').on('click', '.delete', function() { 
    $(this).closest('.message').remove(); 
}); 

Answer 3

私が正しく理解していれば、clickが呼び出されたときに更新のトップレベル<DIV>を削除する必要があります。あなたは、たとえば行うことができます：それは（私の例ではdiv）選択指定とDOMからそれを削除見つけるまで

$('label.deleteTrigger').live(function(){ 
    $(this).parentUntil('div').remove(); 
}); 

これは、先祖が上がるだろう。あなたはそれについての詳細を読むことができますhere。

また、labelにclass（この例ではdeleteTrigger）を追加する必要があります。そのため、削除をトリガーする要素を特定する方法があります。