web-dev-qa-db-ja.com

jqueryを使用して特定のIDを持つすべての要素を削除する

Id = "myid"の複数のスパンを持つフォームがあります。このIDを持つすべての要素をDOMから削除できるようにしたいのですが、jQueryがそれを行う最適な方法だと思います。 $ .remove（）メソッドを使用して、このIDの1つのインスタンスを削除する方法を見つけました。

$('#myid').remove()

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

通常のJS（jQueryを使用しない）でこれを行うためのクリーンな方法があれば、私もそれを受け入れます。たぶん問題は、idが一意であると想定されていることです（つまり、id = "myid"の要素が複数あることは想定されていません）。

おかげで、

クリス

javascriptjquerygetelementbyid
45
Chris

.remove()はそれらすべてを削除する必要があります。問題は、IDを使用していることだと思います。 oneがページ上の特定のIDを持つHTML要素のみであるため、jQueryは最適化を行い、すべてを検索するわけではありません。代わりにclassを使用してください。

66
mpen

すべての要素には一意のIDが必要であるため、＃myidを持つ要素は複数存在しないようにする必要があります

「id」は一意の識別子です。この属性がドキュメントで使用されるたびに、異なる値が必要です。この属性をスタイルシートのフックとして使用している場合、id（1つの要素を正確に識別するために使用される）よりもクラス（要素をグループ化する）を使用する方が適切な場合があります。

それでも、これを試してください：

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

dom要素のidは一意である必要があります。代わりにクラスを使用してください（<span class='myclass'>）。このクラスですべてのスパンを削除するには：

$('.myclass').remove()
14
Minh Nguyen

たとえば、一致するIDパーツを持つすべての要素を削除する場合：

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

これを試して：

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

「*」を忘れないでください-これは一度にそれらをすべて削除します-乾杯

Working Demo

8
PernerOl

classは単一の要素のみであるため、複数の要素に対してidを使用する必要があります。ただし、.each()構文に関する質問に答えるには、次のようになります。

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

公式のJQueryドキュメント こちら 。

6
Peter

最もクリーンな方法は、html5セレクターAPI、特にquerySelectorAll()を使用することです。

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

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

5
chad eubanks

すでに述べたように、one要素のみが特定の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。

Working Demo

0
Felix Kling