Удалить всю строку таблицы в ванили Javascript

Question

У меня есть HTML-таблица (table2), которая динамически заполняется копиями строк (rowData) из другой таблицы (table1) при нажатии кнопки «Добавить» на table1.

Строки таблицы2 содержаткнопка «удалить» - поэтому, если пользователь нажимает «удалить», мне нужно удалить всю строку, соответствующую этой кнопке.

Пока что я добавил атрибут onclick с innerHTML, но я изо всех силсоздать успешную функцию remove (), которая удаляет щелкнувшую строку!

addToFavourites(someData);

// someData will look like this:

// <tr class='resultRow'>
//  <td>text1</td>
//  <td>text2</td>
//   <td>text3</td>
// </tr> 

const addToFavourites = rowData => {
    let table2Row = document.createElement("tr");
    table2Row.innerHTML = 
`${rowData.innerHTML}<td class='cell'><button type='button' onclick='remove()' class='remove-btn'>Remove</button></td>
`;
    table2.appendChild(table2Row);
  }; 

Answer 1

Сначала вам нужна кнопка удаления для ссылки на что-либо, например, на идентификатор или класс, или, возможно, event.target.parentElement.... (при условии, что целью события кнопки является сама кнопка), и у каждой строки есть своя собственная кнопка.Поскольку в вашем коде нет уникальных идентификаторов, я попытаюсь заставить эту работу работать с тем, что у вас есть.

const remove = (event) => {
  // the first parentElement is <td>, then second is <tr>
  event.target.parentElement.parentElement.remove();
}

const addToFavourites = rowData => {
  let table2Row = document.createElement("tr");
  table2Row.innerHTML = `${rowData.innerHTML}<td class='cell'><button type='button' onclick='remove()' class='remove-btn'>Remove</button></td>`;
  table2.appendChild(table2Row);
};