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

Question

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>

Ashish Kumar · Answer 1 · 2016-05-30T06:49:23.500

I think replaceWith method of jQuery should help you doing this. Here is working example:

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

Happy Coding...

Thank you for your help Ashish. I really appreciate it. I'm using @LinkinTED answer for now. :) — Zulhilmi Zainudin, May 30 '16 at 07:00
No problem mate. But I thought my code also can do what you want. All you needed is to replace the `HIGHLIGHT` element by text inside it, right? :) — Ashish Kumar, May 30 '16 at 07:02

score 1 · Accepted Answer · answered May 30 '16 at 05:56

1

You can fix that by using the jQuery :contains selector.

Then select the HTML of the element, insert it before it, and the remove() the element.

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

Updated Fiddle

answered May 30 '16 at 05:56

GreyRoofPigeon

17,833
4
36
59

Thank you. This is what I'm looking for `$(this).before( $(this).html() ).remove();` :) – Zulhilmi Zainudin May 30 '16 at 06:59

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

2 Answers2