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();