How to delete the last column in an HTML TABLE using by jquery?

jquery remove column from table
how to hide a column in html table using javascript
how to delete a column in html table using javascript
remove last td from table jquery
show hide columns in html table
dynamically hide columns in table html
javascript delete table row by id
jquery hide table column

I have an HTML TABLE:

<table id="persons" border="1">
    <thead id="theadID">
        <tr>
            <th>Name</th>
            <th>sex</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody id="tbodyID">
        <tr>
            <td>Viktor</td>
            <td>Male</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>Female</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Male</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>

I need a javascript/jquery code, which delete the last column (message) in the table:

function deleteLastColumn() {
    $("#theadID tr th:not(:last-child)......
    $("#tbodyID tr td:not(:last-child)......
}

So the result should be this:

<table id="persons" border="1">
    <thead id="theadID">
        <tr>
            <th>Name</th>
            <th>sex</th>
        </tr>
    </thead>
    <tbody id="tbodyID">
        <tr>
            <td>Viktor</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

I know there is the ":not(last)" method, but I can't find any example to my problem. Could anyone help me?

Try

$('#persons tr').find('th:last-child, td:last-child').remove()

Demo: Fiddle

How to delete the last column in an HTML TABLE using by jquery , How to delete the last column in an HTML TABLE using by jquery? I need a javascript/jquery code, which delete the last column (message) in the table: function deleteLastColumn() { $("#theadID tr th:not(:last-child) $("#tbodyID tr td:not(:last-child) } I currently have a table that can be N columns and N rows. In the interface I have a button to remove the last column, but I can't figure out how to remove the last td from all the rows, what I've achieved so far is to remove the first row tdand the last row td, but leave the others there. Here is my code (only deletes the last title currently):

You can use this solution to achieve it easily..

function myFunction() {
  var allRows = document.getElementById('my_table').rows;
 for (var i=0; i< allRows.length; i++) {
   allRows[i].deleteCell(-1); 
 }
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table id="my_table">
  <thead >
    <th>Column 1</td>
    <th>Column 2</td>
    <th>Column 3</td>
  </thead >
  <tr >
    <td>Number 1</td>
    <td>String 1</td>
    <td>Decimal 1</td>
  </tr>
  <tr >
    <td>Number 2</td>
    <td>String 2</td>
    <td>Decimal 2</td>
  </tr>
  <tr >
     <td>Number 3</td>
    <td>String 3</td>
    <td>Decimal 3</td>
  </tr>
</table><br>

<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>

How to remove last column from a html table in jquery?, How to remove last column from a html table in jquery or javascript..? For ex: < table><tr> <td>First</td> <td>Middle</td> <td>Last</td> Need to� You need to code to remove the deleted table row data from the database. Remove table column using jQuery To remove a column, it is not ideal to assign a delete button like we did for removing rows. Instead, the column will be removed when the column header is clicked. In the jQuery code, we need to attach a click event to the table header.

In addition to Arun P Johny's answer,

That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.

function deleteLastColumn() {
    $(document).find('.last').remove()
}

after adding class last to the last td and th of the table.

Demo : Fiddle

How to Remove Column from HTML Table using JavaScript , How to remove table row from table using jQuery ? How to remove HTML tags with RegExp in JavaScript? How to remove “disabled” attribute from HTML input � javedwahid. $ ('#id').find ("td").last ().remove (); Thios will only work if the row has just 1 row. If there are multiple rows then this won't work as just remove the Last td in the table But I think the last column of each row has to be removed.. Check out this fiddle. http://jsfiddle.net/sushanth009/p9VDa/2/.

jQuery remove table column (by column number), It also removes the table row heading associated with the removed column. // remove the 1st column $('#table').find('td,th').first().remove();� The jQuery remove() method is used to remove a row from HTML table. jQuery remove() Method: This method removes the selected elements alongwith text and child nodes. This method also removes data and events of the selected elements.

HTML DOM TableRow deleteCell() Method, No return value. More Examples. Example. Delete the last cell(s) from the a table row with id="myRow":. Simple jQuery code snippet to remove an entire table column based on the column number. It also removes the table row heading associated with the removed column. It also removes the table row

HTML DOM Table deleteRow() Method, The value of -1 can also be used; which result in that the last row will be deleted. This parameter is required in Firefox and Opera, but optional in Internet Explorer, � The value of -1 can also be used; which result in that the last row will be deleted. This parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari. If this parameter is omitted, deleteRow() removes the last row in IE and the first row in Chrome and Safari.

Comments
  • Worked for me too! Thanks a Bunch!