Question

我有一个段落标记，其中包含2个（可以更多）highlight个标记。

我现在想要做的是，当我点击按钮时，我希望销毁包含“可移动”文本的highlight标记，并替换为“可移动”的纯文本而不使用{{1} } tag和所有data- * attributes。

HTML ：

highlight

JS ：

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

预期结果：

$(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="btn edit_annotation" data-id="1464586442243">Edit</button>&nbsp;<button class="btn delete_annotation" data-id="1464586442243">Delete</button>" id="anchor_1464586442243" data-original-title="" title="">Section</highlight> 1 removable true </p>之类的here，但它对我不起作用。

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

.contents().unwrap()

Answer 1

我认为 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(){
	    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>

快乐编码......

Answer 2

您可以使用jQuery :contains选择器来解决这个问题。

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

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

Updated Fiddle

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

2 个答案: