BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Javascriptを使用してHTML要素を削除するには？

2022-02-20 15:09:48

質問事項

全くの初心者です。jQueryではなく、オリジナルのJavascriptを使用してHTML要素を削除する方法を誰か教えてください。

index.html 

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

 <form>
  <input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>
</body>

myscripts.js 

function removeDummy() {
 var elem = document.getElementById('dummy');
 elem.parentNode.removeChild(elem);
}

送信ボタンをクリックするとどうなるかというと、ごくごく短い時間だけ消えて、すぐにまた表示されるのです。ボタンをクリックしたときに、その要素を完全に削除したいのです。

どのように解決するのですか？

何が起こっているかというと、フォームが送信され、ページが（元の内容で）リフレッシュされているのです。あなたは click イベントを送信します。

要素を削除したい場合や ではなく を処理し、フォームを送信します。 submit イベントを返し、代わりに false をハンドラから取得します。

HTMLです。 

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

JavaScriptです。 

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

しかし、ダミーの div を削除することだけが目的であれば、そのためのフォームはまったく必要ありません (あるいは必要ありません)。その代わりに

HTMLです。 

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

JavaScriptです。 

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

しかし そのようなイベントハンドラの設定方法は古いのです。JavaScriptのコードが独自のファイルにあるなど、勘がいいようですね。次のステップとしては、さらに踏み込んで onXYZ 属性はイベントハンドラのフックに使用されます。その代わりに、あなたのJavaScriptでは、より新しい（2000年頃の）方法でイベントハンドラをフックすることができます。

HTMLを使用します。 

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

JavaScriptです。 

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
function pageInit() {
    // Hook up the "remove dummy" button
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2 standard
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE (IE9 finally supports the above, though)
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // Really old or non-standard browser, try DOM0
        btn.onclick = removeDummy;
    }
}

...そして pageInit(); から script タグをページ末尾に配置します。 body (の直前）。 </body> タグ)、または window load イベントが発生しますが かなり遅い はページロードのサイクルに含まれるため、通常はイベントハンドラをフックするのに適していません (これは 後 は、例えば、すべての画像が最終的にロードされました)。

ブラウザの違いに対応するために、いくつかの処理を入れなければならないことに注意してほしい。おそらく、イベントをフックするための関数があれば、毎回そのロジックを繰り返す必要はないだろう。あるいは、以下のようなライブラリの使用を検討してください。 jQuery , プロトタイプ , YUI , クロージャ または その他 を使えば、ブラウザの違いもスムーズに解決できます。それは 非常に重要 しかし、ライブラリは多くの不整合を処理し、また多くの便利なユーティリティを提供します - ブラウザの違いを処理するイベントハンドラをフックする手段などです。また、ほとんどのライブラリは関数（例えば pageInit のずっと前に、DOM を操作できるようになったらすぐに実行されるようにします。 window load が発射されます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します