jQuery объект удаляет HTML-разметку

Question

Итак, я конвертирую HTML-код в объект jQuery, где я хочу немного его отредактировать. В этом случае я просто хочу удалить изображения из содержимого. По какой-то причине он удаляет больше, чем это.

Проверяя приведенные ниже разметки HTML, вы также увидите, что также удаляются tr вместе с содержимым второго tr.

JQuery

var getHTML = ''; 

$('.option-'+ optionNumber).each(function(){ //optionNumber in this very example is 0 and thus will select the below trs with class option-0 
    getHTML += $(this)[0].outerHTML; 
    }); 

var newHTML = $(getHTML); 
newHTML.find('img').remove(); 

Оригинал HTML разметка:

<tr class="option-0"> 
    <td> 
     1 
    </td> 
    <td> 
     Simple 
    </td> 
    <td> 
     <img alt="" src="gfx/man_icon.gif"> 
    </td> 
    <td id="thisOptionPrice0" rowspan="2"> 
     $450.00 
    </td> 
    <td id="thisSelectionOption0" rowspan="2" style="width: 100px; text-align: center; vertical-align: middle;"> 
     <div data-role="fieldcontain"> 
      <fieldset data-role="controlgroup"> 
       <div class="ui-radio"> 
        <label class="chooseLabel ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off" for="packageOption-0">Elegir</label> 
        <input data-cacheval="false" name="selectReservation" data-optionnumber="0" class="selectReservationOption" onclick="selectPackageOption(0); return false;" id="packageOption-0" value="1|1@2|1" type="radio"> 
       </div> 
      </fieldset> 
     </div> 
    </td> 
</tr> 
<tr class="option-0"> 
    <td> 
     1 
    </td> 
    <td> 
     Doble 
    </td> 
    <td> 
     <img alt="" src="gfx/man_icon.gif"> 
    </td> 
</tr> 

РЕЗУЛЬТАТ:

<td> 
    1 
</td> 
<td> 
Doble 
</td> 
<td></td> 
<td id="thisOptionPrice0" rowspan="1"> 
    $300.00 
</td> 
<td id="thisSelectionOption0" rowspan="1"> 
    <div data-role="fieldcontain"> 
     <fieldset data-role="controlgroup"> 
      <div class="ui-radio"> 
       <label class="chooseLabel ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off" for="packageOption-0">Elegir</label> 
       <input data-cacheval="false" name="selectReservation" data-optionnumber="0" class="selectReservationOption" onclick="selectPackageOption(0); return false;" id="packageOption-0" value="2|1" type="radio"> 
      </div> 
     </fieldset> 
    </div> 
</td> 

Что я здесь отсутствует? Заранее спасибо

EDIT

Делая это, как это, кажется, чтобы получить первый тр право .. но забывает о второй один: вар getHTML = «»;

$('.option-'+ optionNumber).each(function(){ //optionNumber in this very example is 0 and thus will select the below trs with class option-0 
    getHTML += '<table>'+ $(this)[0].outerHTML +'</table>; 
    }); 

Что здесь происходит?

Решено - Это сделал трюк

var getHTML = ''; 
var finalHTML = ''; 
$('.option-'+ optionNumber).each(function(){ 
    getHTML = '<tbody>'+ $(this)[0].outerHTML +'</tbody>'; 
    var newHTML = $(getHTML); 

    newHTML.find('img').remove(); 
    finalHTML += newHTML.html(); 
    }); 

Спасибо всем за усилия.

Answer 1

Что делает следующее?

$(".option0 img").remove() 

(попробуйте)

Answer 2

Попробуйте это ...

var _temp = $("table").clone(); 

$(_temp).find("tr img").remove() 

$("body").append(_temp) 

Check on fiddle

Answer 3

Чтобы удалить все <img>-х с вашей веб-странице, просто сделайте $("img").remove().

Рабочий фрагмент кода:

$("img").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr class="option-0"> 
 
    <td> 
 
    1 
 
    </td> 
 
    <td> 
 
    Simple 
 
    </td> 
 
    <td> 
 
    <img alt="" src="gfx/man_icon.gif" > 
 
    </td> 
 
    <td id="thisOptionPrice0" rowspan="2"> 
 
    $450.00 
 
    </td> 
 
    <td id="thisSelectionOption0" rowspan="2" style="width: 100px; text-align: center; vertical-align: middle;"> 
 
    <div data-role="fieldcontain"> 
 
     <fieldset data-role="controlgroup"> 
 
     <div class="ui-radio"> 
 
      <label class="chooseLabel ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off" for="packageOption-0">Elegir</label> 
 
      <input data-cacheval="false" name="selectReservation" data-optionnumber="0" class="selectReservationOption" onclick="selectPackageOption(0); return false;" id="packageOption-0" value="1|1@2|1" type="radio"> 
 
     </div> 
 
     </fieldset> 
 
    </div> 
 
    </td> 
 
</tr> 
 
<tr class="option-0"> 
 
    <td> 
 
    1 
 
    </td> 
 
    <td> 
 
    Doble 
 
    </td> 
 
    <td> 
 
    <img alt="" src="gfx/man_icon.gif"> 
 
    </td> 
 
</tr>

Answer 4

Чтобы anwser в questuion 'что происходит' ...

При создании объекта JQuery, как это: var newHTML = $('<tr>one</tr><tr>two</tr>'), он не может создать правильный элемент html.

Вы должны либо передать массив объекту jquery, либо обернуть свой <tr> s в таблице, чтобы представить его как правильный объект таблицы.

var newHTML = $("<table>"+getHTML+"</table>"); 
newHTML.find('img').remove();