I'm struggling to remove the table element inside the TD tag using jQuery.

Here is my Table structure:

<table>
   <tr>
       <td>some data</td>
       <td>
       <table><tr><td>this table inside I want to delete</td></tr></table>
       </td>
   </tr>
</table>

I want to use .remove() function in ready state function, but I don't know how.

I'm struggling to remove the table element inside the TD tag using jQuery.

Here is my Table structure:

<table>
   <tr>
       <td>some data</td>
       <td>
       <table><tr><td>this table inside I want to delete</td></tr></table>
       </td>
   </tr>
</table>

I want to use .remove() function in ready state function, but I don't know how.

• javascript
• jquery
• html
• html-table

6 Answers 6

i suppose the following will work :

$('td table').remove()

basically what this says is :

select the table , which is a child of a td .

so no matter how many tables in td's you have it will remove them all .

use an id or class name to furthermore define what you want to select .

try this

$(document).ready(function(){
     $('td table').remove();
});

Give your table an Id like this

<table>
   <tr>
       <td>some data</td>
       <td>
       <table id="tableId"><tr><td>this table inside I want to delete</td></tr></table>
       </td>
   </tr>
</table>

Then you can pinpoint accurately your selector

$('#tableId').remove()

This will help you, here eq() are used to define which td you want to remove...

$('td').eq(0).find('table').remove();

Demo here

$('td > table').remove();

this will only remove direct child of parent.

U can also use empty

$('td table').empty();

DEMO

Difference between using remove and empty