在js中刪除表中動態創建的行

Question

我正在使用 Otree 實時方法來實現一個具有兩個角色的游戲：賣家發送報價，買家可以接受。 我用一個容器和一個添加可點擊表行的容器實現了這個：

<div class="container">
<h2> Job offers </h2>
<table class="table">
    <tbody id="offers_table">
    </tbody>
</table>
</div>

function liveRecv(data) {
    let current_offer = data["offer"];
    let player_offer = data["from"];
    let requested_effort = data["effort"];
    document.getElementById("offers_table").innerHTML +=
        `<tr><td> 
            Player ${player_offer} offered ${current_offer} for ${requested_effort} effort
            <button class="button" onclick="acceptOffer()"> Accept </button>          
        </td></tr>`;
}

現在我需要定義acceptOffer() function，它應該從該人點擊的表格中刪除行（還有其他玩家）。 原則上我可以使用與上面類似的代碼-=但是我如何引用新創建的元素？

Answer 1

您需要傳遞“this”——指向按鈕的指針，作為 acceptOffer() 的參數 function

 <button class="button" onclick="acceptOffer(this)"> Accept </button>

更進一步，在function本身，通過method.parentNode go 到該行並去掉

function acceptOffer(el) {
  const offer = document.querySelector("#offers_table");
  offer.removeChild(el.parentNode.parentNode);
  return false;
}

或者你可以這樣做

function acceptOffer(el) {
  el.parentNode.parentNode.parentNode.removeChild(el.parentNode.parentNode);
  return false;
}

PS：第一個.parentNode是一個cell。 second.parentNode 是一行。 而third.parentNode分別是tbody