Заменить родительскую таблицу, хранящую дочерние таблицы

Question

Я искал это на SO, но ни один из вариантов не работает должным образом. У меня есть таблица, в которой есть контент, который я хочу переформатировать, но иногда он может поставляться с внутренними таблицами, которые я хочу хранить в виде таблиц. Проблема в том, что я хочу удалить родительскую таблицу, но оставив возможные внутренние таблицы. Вот мой код.

var crespformat = $('#contenido-resp'); 
var crespcontent = crespformat.find("td, th").contents().detach(); 
crespformat.find("table").remove(); 
crespformat.append(crespcontent); 

Я попытался с помощью селекторов, чтобы получить первый уровень ребенка, как .find('.contentpanel > td, .contentpanel > th') или children('table'), но он не работает. В первой таблице есть contentpanel класс, но мне это не очень помогает.

EDIT:

Вот HTML я хочу переформатировать

<div id="contenido-resp"> 
<table class="contentpanel"> 
    <tbody> 
     <tr> 
      <td> 
       <img src="http://www.domain..." alt="..." /> 
      <p> 
       Some content here 
      </p> 
      <table> 
       <tbody> 
         <tr> 
          <td> 
          <p><!-- Content I do want to remain as table --></p> 
          </td> 
          <td> 
          <span><!-- Content I do want to remain as table --></span> 
          </td> 
          <td> 
          <!-- Content I do want to remain as table --> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</div> 

И мой желаемый результат HTML будет таким:

<div id="contenido-resp"> 
    <img src="http://www.domain..." alt="..." /> 
     <p> 
      Some content here 
     </p> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
        <p><!-- Content I do want to remain as table --></p> 
        </td> 
        <td> 
        <span><!-- Content I do want to remain as table --></span> 
        </td> 
        <td> 
        <!-- Content I do want to remain as table --> 
        </td> 
       </tr> 
      </tbody> 
      </table> 
</div> 

Но с моим текущим кодом я получаю эту

<div id="contenido-resp"> 
    <img src="http://www.domain..." alt="..." /> 
     <p> 
      Some content here 
     </p> 
     <p><!-- Content I do want to remain as table --></p> 
     <span><!-- Content I do want to remain as table --></span> 
     <!-- Content I do want to remain as table --> 
</div> 

He повторно связать с JSFiddle

http://jsfiddle.net/2of0kLp7/embedded/result/

Answer 1

Попробуйте использовать .clone()

$(document).ready(function(){ 
 
    var crespformat = $('#contenido-resp'); 
 
    var crespcontent = crespformat.find("td:first"); 
 
    var content = crespcontent.find("img, p, table").clone(); 
 
    crespformat.html(content); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="contenido-resp"> 
 
    <table class="contentpanel"> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <img src="http://placehold.it/500x200" alt="..." /> 
 
      <p> 
 
      Some content here 
 
      </p> 
 
      <table> 
 
      <tbody> 
 
       <tr> 
 
       <td> 
 
        <p>Text on first celll</p> 
 
       </td> 
 
       <td> 
 
        <span>Content on second cell</span> 
 
       </td> 
 
       <td> 
 
        <img src="http://placehold.it/350x150" alt="img-on-cell" /> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

jsfiddle http://jsfiddle.net/2of0kLp7/3/