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> 

缺少什么我在这里？ 在此先感谢

编辑

做它像这样看来，以获得第一TR正确的..但忘掉第二个： 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 += '<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();