删除 但保留 html

Question

我正在尝试删除一个空格，但每个解决方案都会不断删除目标元素的内部 hmtl。如何仅删除 &nbsp 部分？

更新：意识到它不会删除任何 HTML，但是在运行脚本时，我的 span 元素被放置在父 A 标签之外。

$('.topitem').each(function(){
    $(this).html($(this).html().replace(/ /gi,''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topitem">
  <div>
    <a href="#" title="text" class="desc">
      <span style="text-align:center;">
         <a href="#"><img src="#" alt="text"></a>text
      </span>
    </a>
  </div>&nbsp;<em></em>
</div>

Answer 1

如果您对结果有问题，您可以将font-size设置为零，这样.topitem内就没有直接space(或其他所有内容(的输出。在这种情况下，您只需要使用 css ，不需要在此任务中使用 javascript。

.topitem {
  font-size: 0px;
}
.topitem * {
  font-size: 14px;
}

<div class="topitem">
  <div>
    <a href="#" title="text" class="desc">
      <span style="text-align:center;"><a href="#"><img src="#" alt="text" /></a>text</span>
    </a>
  </div>
  &nbsp;test
  <em>em content</em>
</div>

如果您想继续使用替代品，请像在问题中那样简单操作。但是，由于您的示例中只有一个项目，根本没有p标签，因此只需在此处使用 class 作为选择器即可。如果您有多个项目，只需再次放置each，但不要使用p .topitem .

$('.topitem').html($('.topitem').html().replace(/ /gi, ''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topitem">
  <div>
    <a href="#" title="text" class="desc">
      <span style="text-align:center;"><a href="#"><img src="#" alt="text" /></a>text</span>
    </a>
  </div>
  &nbsp;
  <em>em content</em>
</div>

Answer 2

1st - 你的选择器 $('p'( - 不存在于 HTML 代码中。您可以通过示例将 DOM 元素中的所有 NBSP 替换为选择器：

    $(".topitem").html(function (i, html) {
        return html.replace(/ /g, '');
    });