Question

当div被翻过来时，我正在使用prepend（）函数来显示图像。如何删除图像 - 即与prepend（）相反的内容

以下是代码：

$("#hover-div").hover(
        function() { $("#image-div").prepend("<img src='images/arrow_redo.png' width='16' height='16' />"); },
        function() { $("#image-div").someFunction("<img src='images/arrow_redo.png' width='16' height='16' />"); }
        );

someFunction只是一个假人 - 我真的不希望它做任何事情。

Answer 1

如果您拥有图片元素的ID，则可以使用remove方法。

$("#imgID").remove();

Answer 2

而不是使用prepend尝试使用prependTo - 请允许我演示：

var img;
$("#hover-div").hover(
    function() { 
        img = $("<img src='images/arrow_redo.png' width='16' height='16' />").prependTo("#image-div"); 
    },
    function() { 
        img.remove();
    }
);

这允许您创建一个包含对图像的引用的变量，以便您可以在预先添加之后对其进行操作。

希望这有帮助

Answer 3

如果在应用prepend（）之前将节点的内容存储在变量中怎么办？

Answer 4

这可能是处理它的最佳方式 - 而且我认为它会为你预加载图像作为额外的奖励（虽然不是积极的）

var $img = $("<img src='images/arrow_redo.png' width='16' height='16' />");
$('#hover-div').hover(function() { 
  $('#image-div').prepend($img);
}, function() {
  $img.remove(); 
});

否则：

$(this).children().eq(0).remove();

会找到第一个孩子并将其删除。但要小心，如果事件发生两次 - 它可能删除的不仅仅是你的图像。

Answer 5

$("#image-div").prev().remove();

这将选择前一个元素并将其删除。

Answer 6

前置是否真的是最佳选择？请记住，DOM操作可能成本很高，因此您可以采取的任何措施来缓解这种情况

听起来你可能会更好地在背景中显示图像，并在鼠标悬停div时将其切换。

类似的东西：

$("#MyDiv").mouseover(function(){
   $(this).find("img").toggle();
});

$("#MyDiv").mouseout(function(){
   $(this).find("img").toggle();
});

或者，使用.hover

这是未经测试的，可以重构为更好，但考虑到我希望得到的东西！

Answer 7

您可以向前置元素添加属性，稍后再查找它们以获取其他内容......

$("#hover-div").hover(
  function() {
    $("<img src='image.png' />").prependTo("#image-div").attr('prepended','yes');
  },
  function() {
    $("[prepended=yes]", "#image-div").remove();
  }
 );

jQuery - 如何撤消prepend

7 个答案: