如何正确取出元素中的文本并销毁元素？

Question

JSFIDDLE

我有一个段落标记2（可以更多）highlight里面的标签。

我现在想要做的是，当我点击按钮时，我希望highlight包含'可移动'文本的标签被销毁，并用'可移动'纯文本替换，而不需要highlight标签和所有数据*属性。

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> 

JS：

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

怎么办呢？我尝试使用.contents().unwrap()像提到的here，但它并没有为我工作。

这是使用.contents().unwrap()后我目前的结果是：

<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 remov<highlight></highlight>able true</p> 

Answer 1

您可以修复，通过使用jQuery :contains选择。

然后选择该元素的HTML，在它之前插入它，然后选择元素的remove()。

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

Updated Fiddle

Answer 2

我觉得jQuery的的replaceWith方法应该可以帮助你做这个。这里是工作示例：

$(function() { 
 
    $('#remove').click(function() { 
 
    // Find all the HIGHLIGHT tags which has text "removable" 
 
    var $target = $("highlight:contains('removable')"); 
 

 
    // Replace all those instances of HIGHLIGHT tags with the text inside of each of those 
 
    $target.replaceWith(function(){ 
 
\t  return $(this).text(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

编码快乐......