Удалить все элементы содержание класс

while(element.length) {
  element[0].parentNode.removeChild(element[0]);
}

Этот код работает конкретно в связке с getElementsByClassName - он возвращает "живой" список элементов, который будет обновляться после каждой операции. Так, начинается цикл: Удаляется первый[0] (в JS счет начинается с нуля) элемент из списка. Заново собирается весь список, снова удаляется первый элемент, и так по кругу.

А было бы приятно один раз собрать все элементы, по очереди всё удалить, и всё. Поэтому в большинстве случаев вместо getElements... используют querySelectorAll('.класс') - он один раз ищет элементы и возвращает статичный список. Предыдущий код не сработает для него, т.к. element.length не будет обновляться после каждого круга.

А вариантов удаления много:

let test = document.querySelectorAll('.className'); // обращаю внимание на точку
// Вариант адын
for( let i = 0; i < test.length; i++ ){
  test[i].outerHTML = "";
}
// Вариант два (forEach - метод массивов, но встроен еще в querySelectorAll)
test.forEach(function(elem){
  elem.parentNode.removeChild(elem);
});
// Варииант три (в JS тоже есть remove(), IE его не поддерживает)
test.forEach( e => e.remove() );
// Разные циклы использованы для разнообразия. Всё можно сделать через классический цикл.

Это правильный код:

  while (element.length) {
    element[0].parentNode.removeChild(element[0]);
  }

Что у Вас "и не совсем правильно отрабатывает"?

function removeElement(elementClass) { 
  let element = document.getElementsByClassName(elementClass); 
  while (element.length) { 
    element[0].parentNode.removeChild(element[0]); 
  } 
}

.error { 
  color: red; 
}

<button type="button" onclick="removeElement('error')">Remove</button> 
 
<span class="error">*</span> 
<span class="error">*</span> 
<span class="error">*</span> 
<span class="error">*</span>

elems = document.querySelectorAll('.error');
for(i=0; i<elems.length; i++) {
elems[i].parentNode.removeChild(elems[i]);
}