JQuery로 요소 제거

Question

현재 롤오버에서 각 요소에 X 링크를 추가하는 데 다음 코드를 사용하고 있습니다. I가 코드 드릴 수 없습니다 무엇

$(".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);