如何在Otree中通过JS移除动态创建的表格行？

在动态创建表格行的场景下，要实现点击按钮移除对应行，核心是找到按钮所属的表格行元素，下面提供两种实用方案：

方案1：创建元素时直接绑定事件（简单直接） #

在动态生成表格行的代码中，给接受按钮绑定onclick事件，并将按钮自身作为参数传入acceptOffer函数，通过按钮的DOM关系定位到所属行：

// 动态添加报价行的函数（示例）
function addOfferRow(offerInfo) {
    const table = document.getElementById('offers-table');
    const newRow = document.createElement('tr');
    
    // 拼接行内容，按钮点击时传入this（即当前按钮元素）
    newRow.innerHTML = `
        <td>报价：${offerInfo.price}</td>
        <td>卖方：${offerInfo.sellerId}</td>
        <td><button onclick="acceptOffer(this)">接受</button></td>
    `;
    
    table.appendChild(newRow);
}

// 实现acceptOffer函数
function acceptOffer(btn) {
    // 通过按钮向上查找最近的<tr>元素
    const targetRow = btn.closest('tr');
    // 移除该行
    targetRow.remove();
    
    // 补充Otree实时通信逻辑（可选，根据你的需求向服务器发送接受信号）
    liveSend({
        type: 'offer_accepted',
        offer_id: offerInfo.id // 假设需要传递报价ID
    });
}

方案2：事件委托（高效适合大量动态元素） #

如果需要生成大量动态行，推荐用事件委托——给表格父元素绑定一次点击事件，通过判断点击目标来定位对应行，避免重复绑定事件：

// 页面加载完成后，给表格绑定事件委托
document.addEventListener('DOMContentLoaded', function() {
    const offerTable = document.getElementById('offers-table');
    
    offerTable.addEventListener('click', function(e) {
        // 判断点击的是接受按钮
        if (e.target.tagName === 'BUTTON' && e.target.textContent === '接受') {
            // 找到按钮所属的表格行
            const targetRow = e.target.closest('tr');
            // 移除该行
            targetRow.remove();
            
            // 从行的data属性中获取报价ID（需要在创建行时设置）
            const offerId = targetRow.dataset.offerId;
            // 发送Otree实时信号
            liveSend({
                type: 'offer_accepted',
                offer_id: offerId
            });
        }
    });
});

// 动态创建行时，给行添加data属性存储报价信息
function addOfferRow(offerInfo) {
    const table = document.getElementById('offers-table');
    const newRow = document.createElement('tr');
    // 用data属性存储报价ID，方便后续获取
    newRow.dataset.offerId = offerInfo.id;
    
    newRow.innerHTML = `
        <td>报价：${offerInfo.price}</td>
        <td>卖方：${offerInfo.sellerId}</td>
        <td><button>接受</button></td>
    `;
    
    table.appendChild(newRow);
}

两种方案的核心都是利用DOM元素的层级关系（closest方法）定位到目标行，其中事件委托更适合高频动态生成元素的场景，性能更优。

内容的提问来源于stack exchange，提问作者Papayapap