如何正確取出元素中的文本並銷燬元素？

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>

編碼快樂......