javascript - 在 jquery 中仅删除父元素而不是其子元素

Question

我想获取一个分区的内部 html，并且我想从该 html 中删除特定元素，看看下面的 html

<div id='mainDiv'>
  <p>dont remove me</p>
  <span id='removeSpan'>Remove Me</span>
  <div id='removeDiv'>
    <p>don't remove me</p>
  </div>
  <p>dont remove me</p>
</div>

从上面的html中我想获取mainDiv的innerHTML并且我想删除removeSpan和removeDiv并且我不想删除remove div 到目前为止我正在做的是..

var fullHtml = $('mainDiv').html();
var filterHtml= fullHtml .replace('<span id='removeSpan'>Remove Me</span>','');  

这适用于该元素，因为我不想要该元素的子元素
但如何仅删除 removeDiv [仅它的开始和结束标记而不是子标记]
最终结果应该如下

 <p>dont remove me</p>
 <p>dont remove me</p>
 <p>dont remove me</p>

感谢您的立即回复..
这里我不想更改我的应用程序屏幕[html]。我只想将innerHtml(当然是在像我说的那样删除之后)收集到变量作为字符串。我可以做这个吗..抱歉给您带来麻烦了!

Answer 1

$('#mainDiv').parent().append($('#mainDiv p')).end().remove();

FIDDLE

或

$('#mainDiv p').unwrap().siblings('#removeSpan').remove();

FIDDLE

这个也保存数据和事件，也可以写入

$('#removeSpan').remove();
$('#mainDiv p').unwrap();

编辑:

如果您只想将 P 标签的 HTML 放在变量中

var html = $.map($('#mainDiv p'), function(e) { return e.outerHTML }).join('');

或者只是段落

var p = $('#mainDiv').find('p');

或段落的克隆

var p = $('#mainDiv').clone(true).find('p');