jquery - jqueryを使用して画像を動的に削除する

Question

私は jquery を使用することを知っています。クリック イベントでイメージ ランタイムをロードする場合は、この構文が使用されます。

    $("#open_door").attr("src", "../assets/door_open.gif");

しかし、別のボタンのクリックイベントで同じ画像ランタイムを削除したい場合は?? 同じ構文が欲しい

Answer 1

domから画像を削除できない場合は、非表示にします。

$("#open_door").css("display","none");

Answer 2

要素の可視性 css プロパティを非表示に変更するだけです。これにより、ページ レイアウト内の位置を維持できますが、表示されません。

$('#open_door').css('visibility', 'hidden');

Answer 3

あなたができること：

$("#open_door").attr("src", ""); // Set the src to "" (nothing)

または：

$("#open_door").remove(); // remove #open_door from the DOM.

あなたの質問に対するあなたのコメントに関して、SOのどこかでこれを見つけました：

$("#myimg").removeAttr("src").attr("src", "");

または、最後の手段として、完全に白い画像をサーバーにアップロードし、代わりにそれを表示することができます。

$("#open_door").attr("src", "path/to/white/image.jpg");

Answer 4

Safariでも同様の問題がありました。属性を空白の値に設定することはできません。短い gif アニメーションをトリガーするボタンが 1 回必要でした。この場合、スポックはカークに良いスマックを与えます!!

アニメーションはこちら: http://www.lowbird.com/data/images/2012/06/tumblr-lq96pfhnuq1qlc8fao1-400.gif

私のソリューションは私の好みでは少し面倒ですが、.hide() メソッドを使用しました。アニメーションを再度表示したい場合は、以前に .show() div を再度実行する必要があります。どうぞ：

 $('#smackKirk').on('click', function(){
    $('#animate').show(); // not necessary in chrome     
    $('#animate').attr("src", "http://www.lowbird.com/data/images/2012/06/tumblr-lq96pfhnuq1qlc8fao1-400.gif");
    setTimeout(function() {
        $('#animate').attr('src',"");
            $('#animate').hide(); // not necessary in chrome 
    }, 2400);