Delete contents of

Question

I am new to javascript/jquery. I have a table that has an index column (0,1,2,3 etc). I would like to delete that part of the table using javascript. I tried to use after() and replaceWith() but couldn't really get it right.

The css class is .jobStats. I would like to ONLY remove contents of th tag in the code below.

   <tr>
  <th>0 </th>
  <td> 2015-06-02</td>
  <td>              ARCA</td>
  <td>   FAILED</td>
  <td>2015-06-03 10:30:51.573000</td>
  <td>                NaT</td>
  <td>                NaT</td>
  <td> NaN</td>
  <td>   NaN</td>
  <td>       NaN</td>
  <td>  8704</td>
  <td> 223226518</td>
  <td>   NaN</td>
  <td>   NaN</td>
</tr>

Any thoughts on how I can achieve that?

Thanks in advance!

possible duplicate of [How to destroy a DOM element with jQuery?](http://stackoverflow.com/questions/1391793/how-to-destroy-a-dom-element-with-jquery) — Rick Smith, Jun 03 '15 at 15:27

AmmarCSE · Accepted Answer · 2015-06-03T15:27:12.330

2

Just use remove()

$('.jobStats').remove();

If you wish to keep .jobStats and want to remove its children, use empty()

$('.jobStats').empty();

Update

I only want to remove the contents of the th tag in the table.

$('th').empty();

will remove both children and text

This method removes not only child (and other descendant) elements, but also any text

edited Jun 03 '15 at 15:27

answered Jun 03 '15 at 15:12

AmmarCSE

30,079
5
45
53

I only want to remove the contents of the th tag in the table. However, the problem is that when i remove that, it also remove the header. I tried this as well: $('tbody th').remove() But that distorts the header because there is still space for the index column there. $('tbody th').empty() looks better – Himanshu Gupta Jun 03 '15 at 15:16

Zee · Answer 2 · 2015-06-03T15:18:04.890

1

You can use empty()

$( ".jobStats" ).empty();

From the docs

Remove all child nodes of the set of matched elements from the DOM.

edited Jun 03 '15 at 15:18

answered Jun 03 '15 at 15:12

Zee

8,420
5
36
58

score 0 · Answer 3 · answered Jun 03 '15 at 15:17

as already some had say .remove() does the work, but keept in mind .detach() as .remove() also remove event handlers (like click, double click , etc), and detach only remove it from DOM but leaves events, so u can detach it now, and atach it again later, with the events intact.

score 0 · Answer 4 · answered Jun 03 '15 at 15:17

0

You can do it simply by

 $("#yourElementID").remove();

 $(".yourClass").remove();

 $("yourHTMLelement").remove();

Hope this helps

answered Jun 03 '15 at 15:17

user786

3,902
4
40
72

Delete contents of

4 Answers4