JavaScriptを使用してHTML要素を削除する方法

124

私はまったくの初心者です。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);
}

[送信]ボタンをクリックすると、非常に短い時間で表示が消え、すぐに表示されます。ボタンをクリックしたときに要素を完全に削除したい。

javascript html

— 初心者コーダー
ソース

クリックしてエラーを見つけ、停止ボタンを押すとどうなりますか？

— アレックス

申し訳ありませんが、話題になっていますが、実際に彼/彼女が彼/彼女自身を「初心者コーダー」と名付けた今、プロフィールはおよそ9000の評判を持っているのは本当におかしいです。:)

— ルネ

189

フォームが送信され、ページが（元のコンテンツで）更新されているのです。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、閉鎖、または他のいくつかのいずれかのあなたのために、これらのブラウザの違いを超える滑らかにします。それはです非常に重要な基盤となるものは、JavaScriptの基礎とDOMの基礎の両方の観点から、起こって理解することが、図書館は矛盾の多くに対処し、また便利なユーティリティの多くを提供-イベントハンドラことをフックする手段のようながら予約ブラウザの違い。それらのほとんどは、関数（pageInit）DOMが操作可能になるとすぐに、起動する前に実行しwindow loadます。

— TJクラウダー
ソース

変更するtype="button"かreturn false;、JS関数に入れます

— Pav

@Pav：これは単なる実験的な演習なので、私は提出することに固執すると思います。私はsubmitを使用するいくつかのプロジェクトを行うので、それに慣れる方がいいです...とにかくアイデアをありがとう。

— 初心者コーダー、

@初心者：さらにいくつかのメモを追加しました。

— TJクラウダー

2

elem.remove（）;を実行しないのはなぜですか。

— Muhammad Umer 2013

1

@ Ghos3t-いくつかの方法：1.属性スタイルのハンドラーから呼び出す関数はすべてグローバルである必要があり、グローバル名前空間はすでにReally Crowded™であり、他のものと競合する関数名を選択するのは簡単です（これはただし、一意の可能性が高い名前のオブジェクトを使用し、その上にすべてのハンドラーを配置することで対処できます。2.古い属性スタイルの方法を使用する（またはonxyz要素のプロパティに割り当てる）と、ハンドラーは1つしか使用できません。また、プロパティに割り当てると、以前使用していたものはすべて置き換えられるため、他のハンドラーとうまく機能しません。（続き）

— TJクロウダー2018年

34

これをしてください element.remove();

ここで試してみてください

http://jsfiddle.net/4WGRP/

— ムハンマドウメール
ソース

5

これはかなり新しい追加のようであり、IEとFFバージョン22以前（red-team-design.com/…）の完全なブラウザーサポートがないため、注意してください。

— 13

1

私は個人的にこれを使用するために、別の5年待つのだ

— slebetman

2

さて、これは現在サポートされていないようです：caniuse.com/#search=remove。私は今それを使うことを受け入れます。IE11をサポートする必要がある場合は、ポリフィルを簡単に作成できると思います...

— jehon

5

将来性のあるコードを書くことは、過去のプログラミングよりも優れています。メンテナンス時間を節約し、使用.remove()

— Gibolt 2017

9

input type = "submit"の代わりにinput type = "button"を使用する必要があります。

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

チェックアウトMozillaの開発者センターの基本的なHTMLとJavaScriptのリソースの

— CoderHawk
ソース

1

リンクをW3SchoolsからMozilla Developer Centerに変更しました。私の推論のためにw3fools.comを見てください ...それとは別に、良い答え:)

— Alastair Pitts

2

@Alastair Pitts-承知しました。POをhtmlおよびjsの基本チュートリアルにポイントしたいだけです

— 。– CoderHawk

8

あなたのJavaScriptは正しいです。あなたのボタンはtype="submit"、ページを更新する原因となっています。

— パヴ
ソース

5

送信ボタンがページをリロードするため、再び表示されます。この動作を防ぐ最も簡単な方法はreturn false、次のonclickようにを追加することです。

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

— mVChr
ソース

4

入力タイプを「ボタン」に変更します。TJとPavが言ったように、フォームは送信されています。あなたのJavascriptは正しく見えます、そして私はそれを非JQueryの方法で試してみることを賞賛します:)

— ニュータン
ソース

これは、submitを使用する私の将来のプロジェクトの単なる実験的な演習なので、送信に固執すると思います

— 。–

4

index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})

— e-motiv
ソース

3

それは正しいコードです。おそらく、フォームが送信され、新しい要素（要素が再び存在する場所）が表示されます。

— アレックス
ソース

3

スクリプトでこのコードを実行してみてください。

document.getElementById("dummy").remove();

そして、うまくいけば、要素/ボタンを削除します。

— シムリーパー
ソース

2

これは機能します。ボタンdivを保持したい場合は、「ダミー」からボタンを削除してください。

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

#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}

<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>

スニペットを展開

— ダートル02
ソース

1

私もまだ初心者ですが、シンプルで簡単な方法が1つあります。outerHTMLを使用できます。outerHTMLは、一部ではなくタグ全体です。

EX：<tag id='me'>blahblahblah</tag>のinnerHTMLはblahblahblah、outerHTMLはすべてになります<tag id='me'>blahblahblah</tag>。

したがって、例では、タグを削除する場合、それは基本的にそのデータを削除することになるため、outerHTMLを空の文字列に変更すると、それは削除のようなものです。

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

代わりに、単に表示しない場合は、可視性、不透明度、表示プロパティを使用して、JSでスタイルを設定できます。

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

opacity要素がまだ表示されていることに注意してください。また、テキストが選択できない場合でも、テキストを選択して、コピー、貼り付けを行うことができます。

Visibility より状況に適合しますが、適用された要素と同じ大きさの空白の透明スペースが残ります。

あなたのウェブページの作り方によっては、表示することをお勧めします。基本的にはビューから要素を削除して表示しますが、DevToolsで引き続き表示できます。お役に立てれば！

— ハリージェームズ・ポッター27
ソース