Question

我有一个HTML表（table2），当单击table1上的“添加”按钮时，该表会动态填充来自另一个表（table1）的行（rowData）副本。

table2行包含一个“删除”按钮-因此，如果用户单击“删除”，则需要删除与该按钮相对应的整行。

到目前为止，我已经为innerHTML添加了onclick属性，但是我正在努力创建一个成功的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

首先，您需要删除按钮来引用某些东西，例如ID或类，或者引用event.target.parentElement....（假设按钮的事件目标是按钮本身），并且每一行都有自己的按钮。由于您的代码中没有唯一的ID，因此我将尝试使用您现有的ID。

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);
};

删除原始Javascript中的整个表格行

1 个答案: