单击 TD 内的按钮时，目标最近的表行 jQuery

Question

所以。 我有这张桌子：

<table>
    <tr>
        <td>Element1</td>
        <td>Element1</td>
        <td>Element1</td>
        <td><a id="btn" href=#">Accept</a></td>
    </tr>
    <tr>
        <td>Element2</td>
        <td>Element2</td>
        <td>Element2</td>
        <td><a id="btn" href=#">Accept</a></td>
    </tr>
</table>

我想要做的是：按钮被点击，它被隐藏并且相应的<tr>得到border: 1px solid black; .

我对 jQuery 有点陌生，不知道如何将 select 作为元素的第二个父元素。 任何帮助，将不胜感激

Answer 1

1. 您的按钮使用相同的id值。 你必须使用class
2. 您也不需要使用 jQuery。请遵循此代码

 const btns = document.querySelectorAll('.id'); btns.forEach((btn) => { btn.addEventListener('click', (e) => { e.preventDefault(); e.target.closest('tr').style.cssText = "border:1px solid black"; e.target.remove(); }) });

 table { border-collapse: collapse }

 <table> <tr> <td>Element1</td> <td>Element1</td> <td>Element1</td> <td><a class="id" href=#">Accept</a></td> </tr> <tr> <td>Element2</td> <td>Element2</td> <td>Element2</td> <td><a class="id" href=#">Accept</a></td> </tr> </table>