How to correctly take out text from an element and destroy the element?

By Zulhilmi Zainudin

JSFIDDLE

I’ve a paragraph tag with 2 (can be more) highlight tags inside it.

What I want to do now is, when I click the button, I want the highlight tag that contains ‘removable’ text to be destroyed and replace with plain text of ‘removable’ without the highlight tag and all data-* attributes.

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
  });
});

EXPECTED RESULT:

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

How to do it? I tried using .contents().unwrap() like mentioned here but it didn’t work for me.

This is my current result after using .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>

Source: Stack Overflow

    

Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273