jQuery - how to undo prepend

Question

I am using the prepend() function to diplay an image when a div is hoevered over. How do I remove the image - i.e. what is the opposite of prepend()

Here is the code:

$("#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 is just a dummy - I am not really expecting it to do anything.

Answer 1

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

That would select the previous element and remove it.

Answer 2

What about if you store content of the node in a variable before you apply prepend()?

Answer 3

If you have the id for the image element you can simply use the remove method.

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

Answer 4

This is probably the best way to handle it - plus I think its going to preload the image for you anyway as an added bonus (although not positive)

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

Otherwise:

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

would find the first child and remove it. Be careful though, if the event happens to fire twice - it could delete more than just your image.

Answer 5

Is prepend really the best option initially? Bear in mind that DOM manipualtion can be costly, so anything you can do to mitigate this would be good

Sounds like you might be better having the image there in the background, and toggling it when you mouseover the div.

Something like:

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

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

Or, alternatively, use .hover

This is untested and can refactored to be better, but given an idea of what I'm getting at hopefully!

Answer 6

instead of using prepend try using prependTo - allow me to demonstrate:

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

This allows you to create a variable that holds a reference to your image so that you can manipulate it after prepending.

Hope this helps

Answer 7

You can add attribute to the prepended elements and find them later for additional...

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