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

这样的事情应该有效。虽然正如克莱图斯所说，你在悬停（）上所做的事情可能会有问题。

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

使用JQuery删除元素

3 个答案: