如何删除特定标签并保留其内容

Question

我在内容可编辑的div中有一些不需要的标签，需要删除它们。

这些是#和 

尝试使用jquery span函数，但结果为unwrap，因为它删除了父标签，而不是标签本身。

有帮助吗？在下面的示例中，预期的控制台是：

undefined

lorem ipsum lorem ipsum lorem ipsum

$('button').on('click', function(){
  $('span').unwrap();
  console.log($('#story').html());
});

Answer 1

您必须使用like

  

$（“＃story”）。find（“ span”）。contents（）。unwrap（）;

$('button').on('click', function(){
  $("#story").find("span").contents().unwrap();
  console.log($('#story').html().replace(/ /g, ''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>
loem ipsum &nbsp;<span style="font-size: 1.3em;">lorem ipsum</span> lorem ipsum
</div>
<br>
<button>CLICK</button>

Answer 2

您可以将innerHTML的{​​{1}}更改为<span>，并使用replace删除 

$('button').on('click', function(){
  $('span').each(function(){
    this.outerHTML = this.innerHTML;
  })
  let html = $('#story').html();
  $('#story').html(html.replace(/ /g,""))
  console.log($('#story').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>
loem ipsum &nbsp;<span style="font-size: 1.3em;">lorem ipsum</span> lorem ipsum
</div>
<br>
<button>CLICK</button>

Answer 3

您需要打开文本节点的包装，因此请使用contents()方法来获取所有子节点。并使用String#replace方法替换 ，其中将html()方法与回调一起使用（回调中的第二个参数是旧的HTML内容）可用于更新内容。

$('button').on('click', function() {

  // get span tags child nodes and unwrap
  $('#story span').contents().unwrap();

  // remove   from html content
  $('#story').html((_, html) => html.replace(/ /g, ''))

  console.log($('#story').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='story' id='story'>
  loem ipsum &nbsp;<span style="font-size: 1.3em;">lorem ipsum</span> lorem ipsum
</div>
<br>
<button>CLICK</button>