Как удалить строку из таблицы, используя js?

Question

[s]

Как можно удалить стоку из таблицы по нажатию кнопки?
С JS и html столкнулся относительно-недавно. На данный момент не имею полной картины - как можно реализовать данную задачу, средствами js.
Мой алгоритм такой: по нажатию на ссылку/кнопку, которая в составе таблицы - сохраняем id строки в скрытую переменную.
Значение этой переменной используется уже непосредственно в js скрипте, в котором мы отлавливаем нажатие кнопки-
используем value нашей hidden переменной и удаляем строку.
Вот мой код, с использованием jstl с помощью которого в цикле добавляю нужное кол-во строк.

<table class="table_quiz">
            <caption/>
            <tbody>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Objective</th>
                <th>Creator</th>
                <th/>
            </tr>
            <c:forEach items="${list}" var="test">
                <tr>
                    <input type="hidden" name="table_id" value="${test.getId()}"/>
                    <td> ${test.getId()}</td>
                    <td> ${test.getName()}</td>
                    <td> ${test.getObjective()} </td>
                    <td> ${test.getCreator()} </td>

                    <td><a href="delQuiz?id=${test.getId()}" content=" ">Delete</a></td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">

    $('document').ready(function() {
        $("td").click(function (){
            var selectId= document.getElementsByName('table_id').value

            alert('already clicked '+selectId);});
    });
</script>

</body>
</html>

Comments

[Андрей]

1) Добавляем обработчик клика на созданные кнопки Delete
2) const { target } = event
3) target.parentNode.parentNode.remove()

Answer 1

[Stalker_RED]

html

<table id="myTable">
  <tr>
    <td>foo</td>    <td>foo</td>    <td class="deleteRow">X</td>
  </tr>
  <tr>
    <td>bar</td>    <td>bar</td>    <td class="deleteRow">X</td>
  </tr>
  <tr>
    <td>hello</td>    <td>world</td>    <td class="deleteRow">X</td>
  </tr>
</table>

js:

myTable.addEventListener('click', function(evt){
	if(evt.target.closest('.deleteRow')) {
  	evt.target.closest('tr').remove()
  }
})

Демка: https://jsfiddle.net/d2vyecu6/1

Answer 2

[Mr Crabbz]

<script type="text/javascript">

    $('document').ready(function() {
        $("td").click(function (){
            var selectId= document.getElementsByName('table_id').value

            alert('already clicked '+selectId);});
            $(this).closest("tr").remove();
    });
</script>

Comments

[s]

При нажатии на строку:
already clicked undefined

[s]

var selectId= document.getElementsByName('table_id').value
может здесь не правильно?

[Mr Crabbz]

svladys, ошибка в вашей строке:

var selectId= document.getElementsByName('table_id').value
Если вы всё равно юзаете jquery, то можно только им и обойтись:

<script type="text/javascript">

    $('document').ready(function() {
        $("td").click(function (){
            var selectId= $(this).closest("tr").find("[name='table_id']").val();
            alert('already clicked '+selectId);});
            $(this).closest("tr").remove();
    });
</script>

[s]

Краб Анархист, теперь id отображается, но строка не удаляется :/
Может как-то необходимо идентифицировать строки в самом html? Чтобы удалялся конкретный тег.
Что скажете?