Как удалить строку таблицы?

Question

button {
  display: none;
  height: 30px;
}

tr {
  height: 30px;
  line-height: 30px;
}

tr:hover {
  background: red;
}

tr:hover button {
  display: inline-block;
}

<table id="table">
  <tbody>
    <tr>
      <td>Строка 1</td>
      <td><button>Удалить</button></td>
    </tr>
    <tr>
      <td>Строка 2</td>
      <td><button>Удалить</button></td>
    </tr>
    <tr>
      <td>Строка 3</td>
      <td><button>Удалить</button></td>
    </tr>
  </tbody>
</table>

Answer 1

Например можно сделать таким образом!

const buttons = document.querySelectorAll('#table button');

[...buttons].map(function(button) {
  button.addEventListener('click', function(e) {
    e.target.closest('tr').remove();
  });
});

button {
display: none;
height: 30px;
}
tr {
height: 30px;
line-height: 30px;
}
tr:hover {
background: red;
}
tr:hover button {
display: inline-block;
}

<table id="table">
<tbody>
<tr>
<td>Строка 1</td>
<td><button>Удалить</button></td>
</tr>
<tr>
<td>Строка 2</td>
<td><button>Удалить</button></td>
</tr>
<tr>
<td>Строка 3</td>
<td><button>Удалить</button></td>
</tr>
</tbody>
</table>

Answer 2

[].forEach.call(document.querySelectorAll('button'), function(button) {
  button.onclick = function() {
    var tr = this.parentNode.parentNode;
    table.deleteRow(tr.rowIndex);
  }
});

button {
  display: none;
  height: 30px;
}

tr {
  height: 30px;
  line-height: 30px;
}

tr:hover {
  background: red;
}

tr:hover button {
  display: inline-block;
}

<table id="table">
  <tbody>
    <tr>
      <td>Строка 1</td>
      <td><button>Удалить</button></td>
    </tr>
    <tr>
      <td>Строка 2</td>
      <td><button>Удалить</button></td>
    </tr>
    <tr>
      <td>Строка 3</td>
      <td><button>Удалить</button></td>
    </tr>
  </tbody>
</table>

Вариант с небольшой анимацией перед удалением строки:

$("button")
  .click(function() {
    var $row = $(this).closest("tr");
    var $td = $row.find("td");
    $.each($td, function() {
      $(this).addClass('tr__del').animate({
        width: '0'
      }, 1500, 'swing', function() {
        $(this).closest("tr").remove();
      })
    });
  });

button {
  display: none;
  height: 30px;
  cursor: pointer;
}

tr {
  display: block;
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
}

td {
  display: inline-block;
  transition: all 0.1s ease;
}

td:nth-child(1) {
  padding: 0 10px;
}

tr:hover button {
  display: inline-block;
}

tr:hover td:nth-child(1) {
  background: red;
}

.tr__del {
  background: red;
  color: white;
}

td.tr__del>button {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tbody>
    <tr>
      <td>Строка 1</td>
      <td><button>Удалить</button></td>
    </tr>
    <tr>
      <td>Строка 2</td>
      <td><button>Удалить</button></td>
    </tr>
    <tr>
      <td>Строка 3</td>
      <td><button>Удалить</button></td>
    </tr>
  </tbody>
</table>

Answer 3

используйте метод closest() для поиска родительской строки и удалите ее.

$("button").click(function(){
   $(this).closest('tr').remove();
});

button {
display: none;
height: 30px;
}
tr {
height: 30px;
line-height: 30px;
}
tr:hover {
background: red;
}
tr:hover button {
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<td>Строка 1</td>
<td><button>Удалить</button></td>
</tr>
<tr>
<td>Строка 2</td>
<td><button>Удалить</button></td>
</tr>
<tr>
<td>Строка 3</td>
<td><button>Удалить</button></td>
</tr>
</tbody>
</table>

БЛОГ НА HUSL

Как удалить строку таблицы?

Ответы (3 шт):