javascript - クラス名で要素を削除しますか？

Question

クラス名を持つ要素を見つけるための以下のコードがあります。

// Get the element by their class name
var cur_columns = document.getElementsByClassName('column');

// Now remove them

for (var i = 0; i < cur_columns.length; i++) {

}

それらを削除する方法がわかりません.....親か何かを参照する必要がありますか？これを処理するための最良の方法は何ですか？

@ Karim79：

これがJSです：

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");
var len = col_wrapper.length;

alert(len);

for (var i = 0; i < len; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        col_wrapper[i].parentNode.removeChild(col_wrapper[i]);
    }
}

HTMLは次のとおりです。

<div class="columns" id="columns">
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div name="columnClear" class="contentClear" id="columnClear"></div>
</div>

編集： jQueryオプションを使用するだけで終わりました。

score 246 · Accepted Answer

JQueryを使用したくない場合：

function removeElementsByClass(className){
    const elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

score 232 · Accepted Answer

jQuery（この場合は実際に使用できると思います）を使用すると、次のように実行できます。

$('.column').remove();

それ以外の場合は、各要素の親を使用して削除する必要があります。

element.parentNode.removeChild(element);

score 49 · Accepted Answer

jQueryまたはES6を使用しない純粋なバニラJavascriptでは、次のことができます。

const elements = document.getElementsByClassName("my-class");

while (elements.length > 0) elements[0].remove();

score 47 · Accepted Answer

Element.remove（）を使用する

単一の要素を削除します

document.querySelector("#remove").remove();

複数の要素を削除する

document.querySelectorAll(".remove").forEach(el => el.remove());

便利な再利用可能な関数が必要な場合：

const remove = (sel) => document.querySelectorAll(sel).forEach(el => el.remove());

// Use like:
remove(".remove");
remove("#remove-me");

<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>
<p id="remove-me">REMOVE ME</p>

score 25 · Accepted Answer

1行

document.querySelectorAll(".remove").forEach(el => el.remove());

たとえば、このページでuserinfoを削除できます

document.querySelectorAll(".user-info").forEach(el => el.remove());

score 15 · Accepted Answer

これは私のために働く

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }

score 10 · Accepted Answer

ブレット-クァークズモードによるgetElementyByClassNameと、IE 5.5から8へのサポートがないことをご存知ですか？クロスブラウザーの互換性を気にする場合は、このパターンに従う方がよいでしょう。

IDでコンテナ要素を取得します。
タグ名で必要な子要素を取得します。
子を反復処理し、classNameプロパティが一致するかどうかをテストします。
elements[i].parentNode.removeChild(elements[i])他の人が言ったように。

簡単な例：

var cells = document.getElementById("myTable").getElementsByTagName("td");
var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

これが簡単なデモです。

編集：マークアップに固有の修正バージョンは次のとおりです。

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");

var elementsToRemove = [];
for (var i = 0; i < col_wrapper.length; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        elementsToRemove.push(col_wrapper[i]);
    }
}
for(var i = 0; i < elementsToRemove.length; i++) {
    elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
}

問題は私のせいでした。結果の要素の配列から要素を削除すると、長さが変わるため、反復ごとに1つの要素がスキップされます。解決策は、各要素への参照を一時配列に格納し、続いてそれらをループして、DOMから各要素を削除することです。

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

score 4 · Accepted Answer

forEach私はオーバーfor/whileループを使用することを好みます。使用するには、最初に変換HTMLCollectionする必要があります。Array

Array.from(document.getElementsByClassName("post-text"))
    .forEach(element => element.remove());

注意してください、それは最も効率的な方法である必要はありません。私にとってははるかにエレガントです。

score 3 · Accepted Answer

これは非常にシンプルなワンライナーで、ES6スプレッド演算子を使用します。document.getElementByClassNameはHTMLコレクションを返します。

[...document.getElementsByClassName('dz-preview')].map(thumb => thumb.remove());

score 2 · Accepted Answer

動的に追加された要素を削除したい場合は、次のことを試してください。

document.body.addEventListener('DOMSubtreeModified', function(event) {
    const elements = document.getElementsByClassName('your-class-name');
    while (elements.length > 0) elements[0].remove();
});

score 1 · Accepted Answer

はい、親から削除する必要があります：

cur_columns[i].parentNode.removeChild(cur_columns[i]);

score 1 · Accepted Answer

次の構文を使用できます。node.parentNode

例えば：

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);

score 1 · Accepted Answer

再帰関数は、以下のような問題を解決する可能性があります

removeAllByClassName = function (className) {
    function findToRemove() {
        var sets = document.getElementsByClassName(className);
        if (sets.length > 0) {
            sets[0].remove();
            findToRemove();
        }
    }
    findToRemove();
};
//
removeAllByClassName();

score 1 · Accepted Answer

これが私がPureJavaScriptで同様のタスクを完了した方法です。

function setup(item){
   document.querySelectorAll(".column") /* find all classes named column */
  .forEach((item) => { item /* loop  through each item */
      .addEventListener("click", (event) => { item
        /* add event listener for each item found */
          .remove(); /* remove self - changed node as needed */
      });
  });
  }

  setup();

<div class="columns" id="columns">
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows1</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows2</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows3</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows4</div>
    <div name="columnClear" class="contentClear" id="columnClear"></div>
</div>

score 0 · Accepted Answer

const elem= document.getElementsByClassName('column')

for (let i = elem.length; 0 < i ; )
    elem[--i].remove();

また

const elem= document.getElementsByClassName('column')

while (elem.length > 0 )
    elem[0].remove();

score -1 · Accepted Answer

これのスキップ要素のバグ（上からのコード）

var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

次のようにループを逆方向に実行するだけで修正できます（一時配列は必要ありません）

var len = cells.length;
for(var i = len-1; i >-1; i--) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
   }
}

score -3 · Accepted Answer

簡単なソリューションを使用できます。クラスを変更するだけで、HTMLコレクションフィルターが更新されます。

var cur_columns = document.getElementsByClassName('column');

for (i in cur_columns) {
   cur_columns[i].className = '';
}

参照：http ：//www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html

javascript - クラス名で要素を削除しますか？

17 に答える 17

単一の要素を削除します

複数の要素を削除する

Related

Reference