1. ホーム
  2. javascript

[解決済み] クラス名で要素を削除する?

2022-04-21 22:37:18

質問

以下のようなコードで、クラス名で要素を検索しています。

// 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のオプションを使うだけでしたね。

解決方法は?

jQueryを使えば(この場合、本当に使ってもいいと思う)、こんな風にできる。

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

そうでない場合は、各要素の親を使用して削除する必要があります。

element.parentNode.removeChild(element);