CODEWITHSUNDEEP
javascripthtmlhtml-table
darksoulsong
darksoulsong

Reputation: 15337

Javascript delete a table tbody tag

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!

Upvotes: 8

Views: 30487

Answers (7)

Jamal Azizbeigi
Jamal Azizbeigi

Reputation: 303

function deleteRow() {
    var rows = document.getElementById("table").rows.length;
    for (j = 1; j < rows; j++){
        document.getElementById("table").deleteRow(1);
    }
}

Upvotes: 0

Simon
Simon

Reputation: 354

The HTMLTableElement has a tBodies property with a remove() method:

var table = document.getElementById('table');
table.tBodies[0].remove();

Upvotes: 1

suba
suba

Reputation: 1440

I hope it will help you. I am sorry. It is too late to answer.

tbody-data is tbody's id value.

$("#tbody-data tr").remove();

Upvotes: 0

MaVRoSCy
MaVRoSCy

Reputation: 17849

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/

Upvotes: 11

Ryan Sayles
Ryan Sayles

Reputation: 3441

There is no deleteTbody but there is removeChild:

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

Upvotes: 0

Galen Cook
Galen Cook

Reputation: 124

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);
};

Upvotes: 2

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Use querySelectorAll() to iterate through all TBODY elements, then remove those that have no children:

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>

Upvotes: 3

Related Questions