与えられたIDを持つすべての要素を削除するためにjqueryのを使用して

StackOverflow https://stackoverflow.com/questions/4223141

質問

私は、ID =「MYID」といくつかのスパンでのフォームを持っています。私は、DOMからこのIDを持つすべての要素を削除できるようにしたいのですが、私はjQueryのは、それを行うための最善の方法だと思います。

：私は単に行うことによって、このIDの1つのインスタンスを削除するには$ .remove（）メソッドを使用する方法を考え出しました 
$('#myid').remove()

だけMYIDの最初のインスタンスを削除し、もちろん。どのようにMYIDのI反復ALL以上のインスタンスを実行し、それらをすべて削除しますか？私はjqueryの$ .each（）メソッドは、方法かもしれないと思ったが、私はMYIDのすべてのインスタンスを反復するための構文を理解し、それらのすべてを削除することはできません。

定期JS（jQueryのを使用していない）でこれを行うにはきれいな方法があれば私もそれに開いています。たぶん、問題は、そのID年代は（すなわち、あなたはID =「MYID」との複数の要素を持っていることになっていない）のユニークなことになっているのですか？

おかげで、

クリス

役に立ちましたか？

解決

.remove()は、それらのすべてを削除する必要があります。私はこの問題は、あなたがIDを使用していることだと思います。唯一のjQueryを最適化し、それらすべてを探していないので、ページ上の特定のIDを持つ1 HTML要素があるようになっています。代わりにののクラスを使用します。

他のヒント

あなたのすべての要素は、固有のIDを持っている必要があり、そう#myid

と複数の要素があってはなりません

アン「ID」一意の識別子です。この属性は、文書で使用されるたびに、それは別の値を持っている必要があります。あなたは、スタイルシートのためのフックとして、この属性を使用している場合には、より多くの（正確に一つの要素を識別するために使用されている）IDより使用クラス（グループ要素）に適切な場合があります。

Neverthlessは、これを試してください 

$("span[id=myid]").remove();

DOM要素のIDは一意で叫びます。代わりに使うクラス（<span class='myclass'>）。 このクラスで、すべてのスパンを削除するには：

$('.myclass').remove()

あなたは、たとえば、一致したIDの部分を持つすべての要素を削除する場合：

<span id='myID_123'>
<span id='myID_456'>
<span id='myID_789'>

これを試してみてください 

$("span[id*=myID]").remove();
「*」忘れてはいけない - これは、一度にすべて削除されます - 歓声

のワーキングデモのの

classは、ただ一つの要素であることを意味するように、

あなたは複数の要素に対してidを使用する必要があります。これは、かかわらず、それはどのように見えるか.each()構文のあなたの質問に答えるために：

$('#myID').each(function() {
    $(this).remove();
});

公式jQueryのドキュメントここします。

それを行うためのクリーンな方法は、具体的querySelectorAll()、HTML5セレクタAPIを使用することです。

var contentToRemove = document.querySelectorAll("#myid");
$(contentToRemove).remove();

querySelectorAll()機能は、特定のIDと一致するDOM要素の配列を返します。あなたはvarに返される配列を割り当てられたら、あなたはjqueryのremove()への引数として渡すことができます。

のように既にだけの 1 の要素は、特定のIDを持つことができる、と述べました。代わりにクラスを使用します。ここでは、ノードを除去するためのjQueryのフリー版は、次のとおりです。

var form = document.getElementById('your-form-id');
var spans = form.getElementsByTagName('span');

for(var i = spans.length; i--;) {
    var span = spans[i];
    if(span.className.match(/\btheclass\b/)) {
        span.parentNode.removeChild(span);
    }
}

getElementsByTagName を使用することができる最もクロスブラウザ互換の方法でありますここに。 getElementsByClassNameは、はるかに良いだろうが、Internet Explorerの<= IE 8でサポートされていません。

のワーキングデモのの

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top