Javascript 如何正确地从元素中取出文本并销毁元素？

我有一个段落标签，里面有2个（可以更多）

突出显示

标签

我现在要做的是，当我单击按钮时，我希望销毁包含“removable”文本的

高亮显示

标记，并替换为没有

高亮显示

标记和所有数据-*属性的纯文本“removable”

HTML：

<p>
  <highlight class="highlight" data-id="1464586442243" data-container="body" data-toggle="popover" data-placement="right" data-content="<p>first</p><button class=&quot;btn edit_annotation&quot; data-id=&quot;1464586442243&quot;>Edit</button>&amp;nbsp;<button class=&quot;btn delete_annotation&quot; data-id=&quot;1464586442243&quot;>Delete</button>"
  id="anchor_1464586442243" data-original-title="" title="">Section</highlight> 1
  <highlight class="highlight" data-id="1464586450092" data-container="body" data-toggle="popover" data-placement="right" data-content="<p>second</p><button class=&quot;btn edit_annotation&quot; data-id=&quot;1464586450092&quot;>Edit</button>&amp;nbsp;<button class=&quot;btn delete_annotation&quot; data-id=&quot;1464586450092&quot;>Delete</button>"
  id="anchor_1464586450092" data-original-title="" title="">removable</highlight> true</p>
<button id="remove" type="button">Remove</button>

$(function() {
  $('#remove').click(function() {
    // i stuck here
  });
});

<p>
  <highlight class="highlight" data-id="1464586442243" data-container="body" data-toggle="popover" data-placement="right" data-content="<p>first</p><button class=&quot;btn edit_annotation&quot; data-id=&quot;1464586442243&quot;>Edit</button>&amp;nbsp;<button class=&quot;btn delete_annotation&quot; data-id=&quot;1464586442243&quot;>Delete</button>" id="anchor_1464586442243" data-original-title="" title="">Section</highlight> 1 removable true
</p>

预期结果：

<p>
  <highlight class="highlight" data-id="1464586442243" data-container="body" data-toggle="popover" data-placement="right" data-content="<p>first</p><button class=&quot;btn edit_annotation&quot; data-id=&quot;1464586442243&quot;>Edit</button>&amp;nbsp;<button class=&quot;btn delete_annotation&quot; data-id=&quot;1464586442243&quot;>Delete</button>"
  id="anchor_1464586442243" data-original-title="" title="">Section</highlight> 1
  <highlight class="highlight" data-id="1464586450092" data-container="body" data-toggle="popover" data-placement="right" data-content="<p>second</p><button class=&quot;btn edit_annotation&quot; data-id=&quot;1464586450092&quot;>Edit</button>&amp;nbsp;<button class=&quot;btn delete_annotation&quot; data-id=&quot;1464586450092&quot;>Delete</button>"
  id="anchor_1464586450092" data-original-title="" title="">removable</highlight> true</p>
<button id="remove" type="button">Remove</button>

$(function() {
  $('#remove').click(function() {
    // i stuck here
  });
});

<p>
  <highlight class="highlight" data-id="1464586442243" data-container="body" data-toggle="popover" data-placement="right" data-content="<p>first</p><button class=&quot;btn edit_annotation&quot; data-id=&quot;1464586442243&quot;>Edit</button>&amp;nbsp;<button class=&quot;btn delete_annotation&quot; data-id=&quot;1464586442243&quot;>Delete</button>" id="anchor_1464586442243" data-original-title="" title="">Section</highlight> 1 removable true
</p>

---

我认为

replaceWith

方法的jQuery应该可以帮助您做到这一点。下面是一个工作示例：

$（函数（）{
$（“#删除”）。单击（函数（）{
//查找文本为“removable”的所有突出显示标记
var$target=$（“突出显示：包含（'removable'）”）；
//用每个突出显示标记内的文本替换所有突出显示标记的实例
$target.replaceWith（函数（）{
返回$（this.text（）；
});
});
});


第一节
可移动真实

删除
您可以使用jQuery
：contains
选择器修复该问题

然后选择元素的HTML，将其插入元素之前，然后使用
remove（）
删除元素

$(function() {
  $('#remove').click(function() {
    $('highlight:contains("removable")').each(function() {
      $(this).before( $(this).html() ).remove();
      // i stuck here
    })
  });
});

谢谢。这就是我要查找的
$（This）.before（$（This.html（））.remove（）：）谢谢你的帮助。我真的很感激。我现在正在使用@LinkinTED答案。：）没问题，伙计。但我认为我的代码也可以做你想做的。您只需将
高亮显示
元素替换为其中的文本，对吗？：）