JavaScriptで画像を削除

JavaScript 画像削除チュートリアル

Web 開発では、ページ上の画像を削除することが必要になることがよくあります。現時点では、JavaScript を使用してこの機能を実装できます。 JavaScript は Web 開発で一般的に使用されるスクリプト言語で、Web ページをより動的でインタラクティブにすることができます。

この記事では、JavaScriptを使用して画像を削除する方法を紹介します。以下の方法で説明します。

1. 削除対象の絵素の取得
2. 絵素の削除

絵素の取得削除する画像

画像を削除するには、まず削除する画像要素を取得する必要がありますが、通常はHTMLのimgタグで画像を定義します。

例:

<img src="/static/imghwm/default1.png"  data-src="example.jpg"  class="lazy"  id="myImage" alt="Example">

上記のコードを通じて、myImage という名前の画像要素を定義します。そのパスは example.jpg です。

JavaScript で document.getElementById メソッドを使用して、指定された ID を持つ要素を取得できます。

例:

var image = document.getElementById('myImage');

上記のコードでは、image という名前の変数を定義し、document.getElementById を使用して ID myImage を持つ要素を取得します。

picture 要素の削除

picture 要素を取得したら、DOM ツリーから削除できます。 DOM ツリーは HTML ページを記述するツリー構造であり、各ノードは HTML 要素を表します。

removeChild メソッドを使用すると、DOM ツリーから要素を削除できます。例:

image.parentNode.removeChild(image);

上記のコードでは、最初に image.parentNode を使用して image 要素の親ノードを取得し、次に、removeChild メソッドを使用してそれを削除します。以上で画像の削除操作は完了です。

完全なコード例:

  
    
    
  
  
    <img src="/static/imghwm/default1.png"  data-src="example.jpg"  class="lazy"  id="myImage" alt="Example">
    Delete Image

    <script>
      function deleteImage() {
        var image = document.getElementById('myImage');
        image.parentNode.removeChild(image);
      }
    </script>
  

上記のコードでは、ボタンをクリックすることで画像の削除をトリガーするボタンを追加しました。同時に、上記のコードを含む deleteImage 関数がボタンに埋め込まれます。

概要

この記事では、JavaScript を使用してページ上の画像を削除する方法について説明します。このうち、最初に document.getElementById メソッドで画像要素を取得し、次に、removeChild メソッドで DOM ツリーから要素を削除します。このようにして、Web ページ上の画像を簡単に削除できるため、ページの対話性が向上します。

以上がJavaScriptで画像を削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。