Удаление элементов по имени класса?

Используя jQuery (который, я думаю, вы действительно могли бы использовать в этом случае), вы могли бы сделать это так:

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

В противном случае вам нужно будет использовать родительский элемент каждого элемента, чтобы удалить его:

element.parentNode.removeChild(element);

Если вы предпочитаете не использовать JQuery:

function removeElementsByClass(className){
    const 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();

Одна линия

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

Например, вы можете сделать на этой странице, чтобы удалить информацию о пользователе.

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

Это работает для меня

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

Бретт, знаете ли вы, что getElementyByClassName в IE 5.5–8 поддерживается не там согласно quirksmode?. Вам будет лучше следовать этому шаблону, если вы заботитесь о кросс-браузерной совместимости:

• Получить элемент контейнера по 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]);
}

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

Попробуйте здесь.

Я предпочитаю использовать forEach вместо _2 _ / _ 3_ зацикливания. Для использования необходимо сначала преобразовать HTMLCollection в Array:

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

Обратите внимание, это не самый эффективный способ. Для меня это намного элегантнее.

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

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

Это очень просто, однострочно, с использованием оператора распространения ES6 из-за document.getElementByClassName возвращает коллекцию HTML.

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

Да, нужно удалить из родительского:

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

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

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

Вот как я выполнил аналогичную задачу на чистом JavaScript.

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>

Вы можете использовать этот синтаксис: node.parentNode

Например:

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

Ошибка пропуска элементов в этом (код сверху)

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 Collection:

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