IDで要素を削除

標準のJavaScriptで要素を削除するときは、最初にその親に移動する必要があります。

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

最初に親ノードに移動する必要があるのは少し奇妙に思えますが、JavaScriptがこのように機能する理由はありますか？

ネイティブDOM関数の拡張が常に最良または最も一般的なソリューションであるとは限りませんが、これは最新のブラウザーでは問題なく機能します。

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

そして、あなたはこのような要素を削除することができます

document.getElementById("my-element").remove();

または

document.getElementsByClassName("my-elements").remove();

注：このソリューションはIE 7以下では機能しません。DOMの拡張について詳しくは、こちらの記事をご覧ください。

編集する：2019年に私の答えを確認node.remove()し、救助に来て、次のように使用できます（上記のポリフィルなし）：

document.getElementById("my-element").remove();

または

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

これらの関数は、IE以外のすべての最新ブラウザーで使用できます。MDNについてもっと読む。

クロスブラウザとIE> = 11：

document.getElementById("element-id").outerHTML = "";

remove毎回考える必要がないように関数を作成できます。

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

それはDOMがサポートするものです。そのページで「remove」または「delete」を検索し、removeChildだけがノードを削除します。

DOMはノードのツリーに編成され、各ノードには値があり、その子ノードへの参照のリストも含まれます。したがって、element.parentNode.removeChild(element)内部で何が起こっているかを正確に模倣します。最初に親ノードに移動し、次に子ノードへの参照を削除します。

DOM4以降、同じことを行うためのヘルパー関数が提供されていますelement.remove()。これはブラウザの87％（2016年時点）では機能しますが、IE 11では機能しません。古いブラウザをサポートする必要がある場合は、次のことができます。

• 質問のように、親ノードを介して要素を削除します、
• 次のように、ネイティブDOM関数を変更します。 Johan Dettmarの回答の、または
• DOM4ポリフィルを使用します。

1つの要素を削除する場合：

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

たとえば特定のクラス名を持つすべての要素を削除するには：

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

あなたはただ使うことができます element.remove()

の ChildNode.remove()メソッドは、オブジェクトが属するツリーからオブジェクトを削除します。

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

ここにあなたが呼び出す方法を示すフィドルがあります document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

NodeListを拡張する必要はありません。すでに実装されています。

**

remove()DOMのメソッドを使用して、その要素を直接削除できます。

ここに例があります：

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

開発中の現在のバージョンであるDOMレベル4の仕様によると、そこにいくつかの新しい便利な突然変異の方法が用意されていますappend()、prepend()、before()、after()、replace()、とremove()。

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

最初に親ノードに移動する必要があるのは少し奇妙に思えますが、JavaScriptがこのように機能する理由はありますか？

関数名はでremoveChild()、親がないときに子を削除するにはどうすればよいですか？:)

一方、表示されているとおりに呼び出す必要はありません。element.parentNode指定されたノードの親ノードを取得するためのヘルパーにすぎません。親ノードがすでにわかっている場合は、次のように使用できます。

例：

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

================================================== =======

さらに何かを追加するには：

一部の回答では、を使用する代わりにを使用parentNode.removeChild(child);できると指摘されていますelem.remove();。しかし、私が気づいたように、2つの機能には違いがあり、それらの回答では言及されていません。

を使用するremoveChild()と、削除されたノードへの参照が返されます。

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

ただし、を使用したelem.remove();場合、参照は返されません。

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

この動作はChromeとFFで確認できます。気付く価値があると思います:)

私の答えが質問にいくつかの価値を追加し、役立つことを願っています!!

ele.parentNode.removeChild（ele）を使用する関数は、作成したがまだHTMLに挿入していない要素に対しては機能しません。jQueryやPrototypeなどのライブラリは、次のようなメソッドを賢く使用して、その制限を回避しています。

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

DOMの元のデザイナーは親/子と前/次のナビゲーションを、今日人気のあるDHTMLの変更よりも優先度が高いため、JavaScriptはそのように機能すると思います。1つの<input type = 'text'>から読み取り、DOM内の相対位置で別の場所に書き込むことができることは、90年代半ばに役立ちました一部の開発者の目。

最初に親ノードに移動する必要があるのは少し奇妙に思えますが、JavaScriptがこのように機能する理由はありますか？

私見：この理由は、他の環境で見たのと同じです。何かへの「リンク」に基づいてアクションを実行しています。リンクしている間は削除できません。

木の枝を切るように。切断している間、木に最も近い側に座ってください。そうしないと、結果は...不運になります（面白いですが）。

これは実際にはFireFoxからのものです...一度限り、IEはパックの前にいて、要素を直接削除することができました。

これは私の仮定ですが、親から子を削除する必要があるのは、FireFoxが参照を処理する方法に問題があるためだと思います。

オブジェクトを呼び出してhari-kariを直接コミットする場合、オブジェクトが死んだ直後は、そのオブジェクトへの参照を保持しています。これは、いくつかの厄介なバグを作成する可能性があります...削除に失敗したり、削除したが有効であるように見える参照を保持したり、単にメモリリークが発生したりします。

彼らが問題を認識したときの回避策は、要素が親を介して削除されることだったと思います。なぜなら、要素がなくなったとき、あなたは単に親への参照を保持しているだけだからです。これにより、これらすべての不快感がなくなり、（たとえば、ノードをノードごとに閉じると）かなりうまく「ジップアップ」されます。

それは簡単に修正可能なバグでなければなりませんが、Webプログラミングの他の多くのものと同様に、リリースはおそらく急いでこれに至りました...そして次のバージョンが登場するまでに、十分な人々がこれを使用してこれを変更するとコードの束を壊すことへ。

繰り返しますが、これはすべて私の推測です。

しかし、私は、Webプログラミングが最終的に完全な春の大掃除を取得し、これらすべての奇妙な小さな特異性がすべてクリーンアップされ、誰もが同じルールで遊び始める日を楽しみにしています。

おそらく、ロボットの使用人が翌日賃金を訴える次の日です。

私が理解しているところによると、ノードを直接削除することはFirefoxでは機能せず、Internet Explorerでのみ機能します。そのため、Firefoxをサポートするには、親に移動してその子を削除する必要があります。

参照：http : //chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

これは、スクリプトエラーなしで要素を削除するのに最適な関数です。

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

に注意してくださいEObj=document.getElementById(EId)。

これは1つの等号ではありません==。

要素EIdが存在する場合、関数はそれを削除しますerror。それ以外の場合は、falseではなくを返します。