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.

Guitar

Can you provide the code you are using currently to create the image / attach the hover event? – Brigette

Add not hide/show the image instead of prepending it. – Digitate

Answer 1

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

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

Hemianopsia

this will work, but is inefficient because you're running another selector instead of storing a var with a reference to the image object. Granted on odd occasion it will be convenient but try doing that hundreds/thousands of times and you start noticing the difference – Randa

Answer 2

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

Randa

Answer 3

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

Campeche

That's right. Ok, so if he adds an <img> tag at the beginning, that means it's a first child of this node and it can be easily removed. – Campeche

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.

Brigette

+1 $(this).children().eq(0).remove(); works for me and i didn't have to create a global. =) thank you sir – Sturdivant

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!

Mauricemauricio

Answer 6

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();
  }
 );

Antitype

Answer 7

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

That would select the previous element and remove it.

Timeworn

-1 this is wrong because prev selects a previous sibling. what he wants to select is a child of image-div – Randa

Wrote this before he had any code. Didn't know where the remove() would be triggered from. – Timeworn