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

Try using:

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

https://jsfiddle.net/Ltdr2qv4/1/