Видалення елементів за назвою класу?

У мене нижче код, щоб знайти елементи з назвою їх класу:

// 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);

Якщо ви не бажаєте використовувати JQuery:

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

За допомогою ES6 можна зробити так:

const removeElements = (elms) => elms.forEach(el => el.remove());

// Use like:
removeElements( document.querySelectorAll(".remove") );

<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>

У чистому JavaScript, без jQuery або ES6, ви можете:

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

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

Це працює для мене

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

Бретт - чи ти знаєш, що getElementyByClassNameпідтримка від IE 5.5 до 8 не існує відповідно до quirksmode ?. Вам буде краще дотримуватися цієї схеми, якщо ви дбаєте про сумісність між веб-переглядачами:

• Отримати елемент контейнера за ідентифікатором.
• Отримати потрібні дочірні елементи за назвою тегу.
• Ітерація над дітьми, тест на відповідність властивості 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]);
    }
}

Ось швидка демонстрація.

EDIT: Ось фіксована версія, специфічна для вашої розмітки:

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]);
}

Проблема була з моєї вини; коли ви виймаєте елемент з отриманого масиву елементів, довжина змінюється, тому один елемент пропускається при кожній ітерації. Рішення полягає в збереженні посилання на кожен елемент у тимчасовому масиві, а потім згодом перебирають цими елементами, видаляючи кожен з DOM.

Спробуйте тут.

Я вважаю за краще використовувати forEachover for/ whilelooping. Для використання необхідно перетворитись HTMLCollectionна Arrayперше:

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

Зверніть увагу, це не обов'язково найефективніший спосіб. Просто набагато елегантніше для мене.

Один рядок

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

Наприклад, ви можете зробити на цій сторінці, щоб видалити інформацію користувача

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

Так, ви повинні видалити з батьківського:

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

Ви можете використовувати цей синтаксис: node.parentNode

Наприклад:

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

Рекурсивна функція може вирішити вашу проблему, як показано нижче

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

Якщо ви хочете видалити елементи, які додаються динамічно, спробуйте це:

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

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();

Це дуже простий, однолінійний, використовуючи оператор розповсюдження ES6 завдяки document.getElementByClassName повертає колекцію HTML.

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

Помилка пропущених елементів у цьому (код зверху)

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]);
   }
}

Ви можете скористатися простим рішенням, просто змінити клас, оновлений фільтр колекції 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