CODEWITHSUNDEEP
javascriptjqueryhtmlcss
helpdoc
helpdoc

Reputation: 1990

how to delete Parent table without removing children table content?

How to delete Parent Table with all table attribute, without removing children table using jquery/javascript

<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>

Output::

<table>
    <tr>
    <td>A</td><td>B</td>
    </tr>
</table>

Upvotes: 0

Views: 57

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can take inner table with unwrap and change html of parent element body in this case which will delete old table.

$('body').html($('table table').unwrap())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Data</td>
    <td>
      <table>
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Or you can take inner table, delete old one and then add inner table to parent element.

var table = $('table table').unwrap();
$('table').remove()

$('body').html(table)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Data</td>
    <td>
      <table>
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 5

Related Questions