web-dev-qa-db-ja.com

要素への参照のみからDOMから要素を削除します

これは非常に単純か不可能です。

私はこれができることを知っています：

_var element = document.getElementById('some_element');
element.parentNode.removeChild(element);
_

...しかし、それは乱雑に感じます。同じことをするための整然とした-そして普遍的にサポートされた-方法はありますか？

それは-私には少なくとも-このようなものがあるはずのようです：

_document.getElementById('some_element').remove();
_

...しかし、それは機能せず、Google/SOを検索しても代替手段はありません。

私はそれがそれほど問題ではないことを知っていますが、parentNode.removeChild()はただハック/乱雑/非効率的/悪い習慣-yと感じます。

javascriptremovechild
15
DaveRandom

少し面倒に見えるかもしれませんが、これは親から要素を削除する標準的な方法です。 DOM要素自体は、parentNodeがなくても単独で存在できるため、removeChildメソッドが親にあるのは理にかなっています。

DOMノード自体のIMO汎用.remove()メソッドは誤解を招く可能性があるため、結局のところ、要素をその親からのみ削除するのではなく、.

ただし、この機能のために独自のラッパーをいつでも作成できます。例えば。

function removeElement(element) {
    element && element.parentNode && element.parentNode.removeChild(element);
}

// Usage:
removeElement( document.getElementById('some_element') );

または、 jQuery のようなDOMライブラリを使用して、一連のラッパーを提供します。 jQueryで：

$('#some_element').remove();

このeditは、ネイティブDOM実装を拡張する可能性について問い合わせたコメントへの応答です。これは悪い習慣と考えられているので、代わりに、要素を含む独自のラッパーを作成し、必要なメソッドを作成します。例えば。

function CoolElement(element) {
    this.element = element;
}

CoolElement.prototype = {
    redify: function() {
        this.element.style.color = 'red';
    },
    remove: function() {
        if (this.element.parentNode) {
            this.element.parentNode.removeChild(this.element);
        }
    }
};

// Usage:

var myElement = new CoolElement( document.getElementById('some_element') );

myElement.redify();
myElement.remove();

これは本質的にjQueryが行うことですが、jQueryは上記のような個別の要素ではなくDOMノードのコレクションをラップするため、少し高度です。

31
James

DOMレベル4仕様は、いくつかのDOM変更操作を実行するという「jQuery哲学」を採用しているようです（ https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#を参照）。インターフェース要素 ）。削除はそれらの1つです。

var el = document.getElementById("myEl");
el.remove();

現時点では、Chrome、Opera、Firefoxの新しいバージョンでのみサポートされていますが、本番環境でこの機能を使用したい場合は、パッチを当てるシムがあります。 https://github.com/Raynos/ DOM-shim

RemoveChildを使用することが望ましいかどうかは関係ありませんが、今のところは議論の余地はありません。

2
Daniel

あなたのコードはそれを行うための正しい最良の方法です。

jQueryには 探しているもの ：

$("#someId").remove();
1
SLaks