Необходимо реализовать удаление объекта "студент" из массива

Рейтинг: 0Ответов: 1Опубликовано: 28.02.2023

Студенты выводятся в виде таблицы, необходимо реализовать возможность их удаления с кнопки, как из массива, где эти студенты и находятся, так и визуально удалить строку из таблицы. Говорю честно-очень туплю, но и, прежде чем писать сюда, искал информацию в интернете. Там предлагались такие варианты, как

<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();
});

и

function SomeDeleteRowFunction() {
  // event.target will be the input element.
  var td = event.target.parentNode; 
  var tr = td.parentNode; // the row to be removed
  tr.parentNode.removeChild(tr);}

Но ничего из этого не сработало. Вот ccылка на гугл драйв с проектом.

javascript
Источник: Stack Overflow на русском

Ответы

▲ 3

Принцип удаления должен быть примерно такой:

const btns = [...document.getElementsByClassName('btn')];

btns.map(btn => {
  btn.addEventListener('click', event => {
    event.target.parentElement.parentElement.remove();
  });
});
table, td{
border: solid 1px black;
}
<table>
<thead>
<tr>
  <th>Имя</th>
  <th>Фамилия</th>
</tr>
</thead>
<tbody>
  <tr>
    <td>Василий</td>
    <td>Пупкин</td>
    <td><button class="btn">Удалить</button></td>
  </tr>
  <tr>
    <td>Семен</td>
    <td>Непомнящий</td>
    <td><button class="btn">Удалить</button></td>
    </tr>
  <tr>
    <td>Мария</td>
    <td>Облигация</td>
    <td><button class="btn">Удалить</button></td>
   </tr>
</tbody>
</table>

Вариант с делигированием:

const students = document.getElementById('students');

students.addEventListener('click', event => {
  if (event.target.classList.contains('btn')) {
    event.target.parentElement.parentElement.remove();
  }
});
table,
td {
  border: solid 1px black;
}
<table id="students">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Фамилия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Василий</td>
      <td>Пупкин</td>
      <td><button class="btn">Удалить</button></td>
    </tr>
    <tr>
      <td>Семен</td>
      <td>Непомнящий</td>
      <td><button class="btn">Удалить</button></td>
    </tr>
    <tr>
      <td>Мария</td>
      <td>Облигация</td>
      <td><button class="btn">Удалить</button></td>
    </tr>
  </tbody>
</table>