Untitled

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Очищаемая таблица</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
<h2>Пример минимально необходимой структуры таблицы (только HTML) для прохождения тестов:</h2>
<div class="example">
  <table>
    <thead>
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
      <th>Зарплата</th>
      <th>Город</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Ilia</td>
      <td>25</td>
      <td>1000</td>
      <td>Petrozavodsk</td>
      <td><button>X</button></td>
    </tr>
    </tbody>
  </table>
</div>

<h2>Результат выполнения вашего кода:</h2>

<script>

  class UserTable {
    elem;
    rows;
    constructor(rows) {
      this.elem = document.createElement('table'); // при нициализации экземпляра класса (ЭК) будет сразу создан элемент с тегом table и свойством класса elem
      this.rows = rows; // в свойство ЭК rows записывается объект со строками rows
      this.createTable(); // сразу вызываем метод класса для создания таблиц
      this.eventListen(); // метод удаления строк

    }
    get elem() {return this.elem;} // вызов свойства elem
    // описываем метод для создания и редактирования таблицы
    createTable(){
      // добавляем в элемент elem ( тег table) заголовки таблицы
      this.elem.insertAdjacentHTML("beforeEnd",
        `<thead id="th">
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
      <th>Зарплата</th>
      <th>Город</th>
      <th></th>
    </tr>
    </thead>`);
      // перебираем в цикле все строки из массива rows  и добавляем в таблицу
      let i = 0;
      for (let r of this.rows){
        i+=1;  // ид номер каждой добавляемой строки в таблице
        console.log(r);  // тест
        this.elem.insertAdjacentHTML("beforeEnd",
          `<tbody>
        <tr id="${i}">
          <td>${r.name}</td>
          <td>${r.age}</td>
          <td>${r.salary}</td>
          <td>${r.city}</td>
          <td><button>X</button></td>
        </tr>
      </tbody>`);}}


    // добавляем обработчик события на клик на элемент с тегом button
    eventListen() {

      let s = this.elem.querySelectorAll("button");  // находим кнопки
      let h = this.elem.querySelectorAll('#th')[0];  // заголовок таблицы
      let l = s.length; // считаем сколько всего кнопок найдено
      for(let b of s){
        b.addEventListener("click", function (e) {
            e.target.parentElement.parentElement.remove();
            l -= 1; // если удалили все строки таблицы, то удаляем и заголовок
            if(l<1){h.remove()};
          }
        )};
    }
  };


  let rows = [
    {
      name: 'Ilia',
      age: 25,
      salary: 1000,
      city: 'Petrozavodsk'
    },
    {
      name: 'Vasya',
      age: 14,
      salary: 1500,
      city: 'Moscow'
    },
    {
      name: 'Ivan',
      age: 22,
      salary: 100,
      city: 'Bryansk'
    },
    {
      name: 'Petya',
      age: 45,
      salary: 990,
      city: 'Chita'
    }
  ];

  let table = new UserTable(rows);
  document.body.append(table.elem);

</script>
</body>

</html>