Angular: Как удалить элементы HTML по имени класса?

Question

При нажатии кнопки я хочу удалить элементы HTML с тем же классом.

HTML

<div class="container">
   <div class="my-class"></div>
   <div class="some-other-class"></div>
   <div class="my-class"></div>
   <div class="another-class"></div>
   <div class="my-class"></div>
<div>

Angular

public clearElm() {
const myClassArray= document.getElementsByClassName('my-class');
if (myClassArray&& myClassArray.length) {
      for (let i = 0; i > myClassArray.length; i++) {
        myClassArray[i].parentNode.removeChild(myClassArray[i]);
      }
    }
}

Answer 1

Были внесены некоторые обновления в ваш код.

i > myClassArray.length этот l oop не будет работать, он должен быть меньше, чем массив. Длина

например: i < myClassArray.length; .

также ...getElementsByClassName всегда будет возвращать массив, поэтому обновленное условие if (myClassArray.length > 0)

const myClassArray= document.getElementsByClassName('my-class');
if (myClassArray.length > 0) {
  for (let i = 0; i < myClassArray.length; i++) {
    myClassArray[i].remove();
  }
}

<div class="container">
   <div class="my-class">1</div>
   <div class="some-other-class">2</div>
   <div class="my-class">3</div>
   <div class="another-class">4</div>
   <div class="my-class">5</div>
<div>

---

сократить код

const myClassArray = document.querySelectorAll('.my-class');

myClassArray.forEach((item) => {
  item.remove();
})