Javascript delete a table tbody tag

Question

I know I can use the following code to remove rows in 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>

But this code leaves an empty tbody tag behing. JS has methods for removing thead and tfoot elements, but it seems it's missing a deleteTbody one.

How am I supposed to remove a tbody and all it's contents by using pure javascript only? No jQuery, please!

Answer 1

If you want to remove the tbody tag, you could select the row itself rather than the table, then use the removeChild function.

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


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