Как удалить строку из DOM по нажатию кнопки в JavaScript?

Question

У меня есть HTML код , как показано ниже. Я скопировал это из DOM, и он генерируется через php.

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <button type="button" onclick="removeRow()" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
    <input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
    <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <button type="button" onclick="removeRow()" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
    <input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
    <input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>

Приведенный выше HTML код относится к следующему снимку экрана:

Постановка проблемы:

Мне интересно, какой код JS мне нужно добавить, чтобы при нажатии кнопки «Удалить» он удалял строку, содержащую эту кнопку.

Например: если я нажму кнопку 2-й строки Удалить , она должна удалить завершить 2-ю строку , а если я нажму 1-ю строку Удалить , кнопка должна удалить полный 1-й ряд .

Вот что я пробовал:

function removeRow() {
 document.queryselector(".house-senate-committee").remove();
}

Answer 1

Вы можете использовать ближайший для достижения этого, как показано ниже

function removeRow(element) {
  $(element).closest('.house-senate-committee').remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
    <input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
    <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
    <input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
    <input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>

Answer 2

Если вы измените свои кнопки на onclick="removeRow(this)", вы можете переписать removeRow, как показано ниже, чтобы удалить div этой кнопки при нажатии.

function removeRow(el) {
  el.parentNode.remove();
}

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
  <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
  <input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
  <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
  <button type="button" onclick="removeRow(this)" name="delete_row[]" style="margin-right:10px;" value="">Delete</button>
  <input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
  <input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>