richie richie - 8 days ago 7
HTML Question

How can I remove the div tags from a html table using jquery or javascript?

I'm looking to remove the divs from a html table but retain the content?

<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
</tbody>
</table>


I have tried:

alert($('#datatable').html().replace('<div>', ''));


But what is alerted still contains the

<div>


tags

I can't remove them from the source because they are used for other purposes.

Answer

Try this

$('#datatable').find('div').remove();

If you want to keep content try this

$('#datatable').find('div').replaceWith(function(){
    return $(this).text()
 });

$('#datatable').find('div').replaceWith(function(){
    return $(this).text()
 });

alert($('#datatable').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable">
    <thead>
        <tr>
            <th></th>
            <th>Jane</th>
            <th>John</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td><div>3</div></td>
            <td><div>4</div></td>
        </tr>
    </tbody>
</table>