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

回答“发生了什么事”的问题......

当您像这样创建 jquery 对象时：var newHTML = $('<tr>one</tr><tr>two</tr>')，它无法创建正确的 html 元素。

您应该将数组传递给 jquery 对象，或者将您的 <tr>s 包装在一个表中以将其呈现为正确的表对象。

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

Answer 2

以下是做什么的？

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

（试一试）

Answer 3

要从您的网页中删除所有<img>，只需执行$("img").remove()。

工作代码sn-p：

$("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

试试这个...

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

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

$("body").append(_temp)

Check on fiddle