JQueryで要素を削除

Question

私は現在、次のコードを使用してロールオーバー時に各要素にXリンクを追加しています。

$(".item").hover(function() { 
    var id = $(this).attr("id"); 

    var roll = $('<a class="close" href="#">X</a>').hide(); 

    roll.prependTo($(this)).fadeIn(0); 
}, function() { 
    $(this).find("a:first").fadeOut(0, function() { 
     $(this).remove() 
    }); 
}); 

このXリンクが押されたときに私がアップコーディングすることができませんが、それが現在である親のdivのための能力が削除される。

この上のヘルプを大好きだ:)

Answer 1

まず、hover（）イベントで要素を動的に追加したり削除したりするのは問題になる可能性があることをお勧めします。通常の解決方法は、必要に応じて表示/非表示にすることです。それはあまりにもパフォーマンスが優れています。

ので：

<div class="item"> 
    <p>Some content</p> 
    <a class="close" href="#">X</a> 
</div> 

と

div.item a.close { display: none; } 

と

$("div.item").hover(function() { 
    $("a.close", this).fadeIn(); 
}, function() { 
    $("a.close", this).fadeOut(); 
}); 
$("a.close").click(function() { 
    $(this).parents("div.item:first").remove(); 
    return false; 
}); 

今、あなたは、動的にDOMへのリンクを追加することによってこれを行うことができますが、私はそれに対して助言します。あなたはしかし、イベント処理のためのlive()を使用しない場合：

$("a.close").live("click", function() { 
    $(this).parents("div.item:first").remove(); 
}); 

Answer 2

このような何かが動作するはずです。 cletusが言っているように、ホバーでやっていることは問題になるかもしれません。

$("a.close").click(function(){ 
    $(this).parent().remove(); 
}); 

Answer 3

クリックハンドラで他のすべてのものを組み合わせる：

$('<a class="close" href="#">X</a>') 
     .hide() 
     .prependTo($(this)) 
     .click(function() { $(this).closest('div').remove(); }) 
     .fadeTo(0);