Javascript удаление тега tbody таблицы

Я знаю, что могу использовать следующий код для удаления строк в vanilla Javascript: 

var table = document.getElementById('table');
    
function deleteRow () {
  table.deleteRow(1);
};
table { background: #ccc; width: 100%; }
table thead { background: #333; color: #fff; }
table tbody { background: magenta; color: #fff; }
<button onclick="deleteRow()">Delete Row</button>
<table id="table">
    <thead>
      <tr>
        <td>foo</td>
        <td>bar</td>
      </tr>
    </thead>
      <tbody>
        <tr>
          <td>lorem</td>
          <td>ipsum</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>lorem</td>
          <td>ipsum</td>
        </tr>
      </tbody>
    </table>

Но этот код оставляет пустой тег tbody behing. JS имеет методы для удаления элементов thead и tfoot,но, похоже, в нем отсутствует deleteTbody.

Как я должен удалить tbody и все его содержимое, используя только чистый javascript? Только без jQuery, пожалуйста!

4 2
javascript html html-table

4 ответа:

Если вы хотите удалить тег tbody, Вы можете выбрать саму строку, а не таблицу, а затем использовать функцию removeChild.

var table = document.getElementById('table');
var row = document.getElementsByTagName('tbody')[0];


function deleteRow () {
    row.parentNode.removeChild(row);
};
1

Попробуйте использовать:

var tbl = document.getElementById("table"); // Get the table
tbl.removeChild(tbl.getElementsByTagName("tbody")[0]); // Remove first instance of body

Https://jsfiddle.net/Ltdr2qv4/1/

3

Использование querySelectorAll() чтобы перебрать все элементы TBODY, удалите те, которые не имеют потомков: 

var table = document.getElementById('table');

function deleteRow() {
  table.deleteRow(1);

  var tb = document.querySelectorAll('tbody');
  for (var i = 0; i < tb.length; i++) {
    if (tb[i].children.length === 0) {
      tb[i].parentNode.removeChild(tb[i]);
    }
  }
};
table {
  background: #ccc;
  width: 100%;
}
table thead {
  background: #333;
  color: #fff;
}
table tbody {
  background: magenta;
  color: #fff;
}
<button onclick="deleteRow()">Delete Row</button>
<table id="table">
  <thead>
    <tr>
      <td>foo</td>
      <td>bar</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lorem</td>
      <td>ipsum</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>lorem</td>
      <td>ipsum</td>
    </tr>
  </tbody>
</table>
2

Нет deleteTbody но есть removeChild: 

var parent = document.getElementById("parent-id");
var child = document.getElementById("child-id");
parent.removeChild(child);
0