jQuery - prependを元に戻す方法

Question

divを上に移動したときに画像を表示するには、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

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

これは、前の要素を選択して削除します。

Answer 2

prepend（）を適用する前にノードの内容を変数に保存するとどうなりますか？

Answer 3

画像要素のIDがある場合は、単にremoveメソッドを使用できます。

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

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

は、最初の子を見つけて削除します。ただし、イベントが2回発生した場合は、画像以外のものも削除する可能性があります。

Answer 5

最初は本当に最優先のオプションがありますか？ DOMのmanipualtionは高価なことができることに注意してくださいので、あなたが背景にあった画像を持つ、としたときにdiv要素をマウスオーバー、それをトグル良いかもしれないようにあなたが緩和するために何かできることは、これは

はサウンドが良いでしょう。以下のような

何か：

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

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

あるいは、代わりには、

.hover使用これはテストされていませんし、改善することをリファクタリングすることができますが、私はうまくいけばで取得していますかのアイデアを与えられました！

Answer 6

代わりのprependToを使用してみてくださいprependを使用して - 私は証明することができます：

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

これはあなたが先頭に追加した後、それを操作できるように、あなたのイメージへの参照を保持する変数を作成することができます。

これはあなたが先頭に追加要素に属性を追加し、追加のために、後でそれらを見つけることができます

Answer 7

...

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