要素からテキストを正しく取り出して要素を破壊する方法は？

Question

JSFIDDLE

私は段落タグに2（それ以上）の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> 

はどのようにそれを行うには？私は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方法は、あなたがこれをやって助けるべきだと思う：

これは.contents().unwrap()を使用した後、私の現在の結果です。ここでは例を働いている：

コーディングハッピー

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

...