Target closest Table Row when button inside of TD is clicked jQuery

Question

So. I have this table:

<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>

What I want to do is: Button gets clicked, it gets hidden and the respective <tr> gets border: 1px solid black; .

I'm kinda new to jQuery and can't figure out how to select the 2nd parent of an element. Any help would be appreciated

Answer 1

1. your buttons are using the same id value. you have to use class
2. Also you don't need to use jQuery. please follow this code

 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>