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>包装在表中以将其显示为正确的表对象。

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

Answer 2

以下是做什么的？

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

（试试）

Answer 3

试试这个......

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

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

$("body").append(_temp)

Check on fiddle

Answer 4

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

工作代码段：

＆＃13;

$("img").remove();

＆＃13;

<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>

＆＃13;

jQuery对象删除HTML标记

4 个答案: