jquery - Jquery删除字符串但保持结构

Question

我正在背弃之前的一篇文章，该文章专门讨论了从元素内部删除字符串。这样做的代码是：

  $this.text( $this.text().replace("text to strip out", "") );

我已经成功地删除了文本“类别：”

仅供参考：这是一个博客页面，其中包含动态添加的类别。在我去掉“类别：”之前的 HTML 结构：

<container>
   <div class="categories">
     "categories: "  //This is what I strip out with above code
     <a href = "...">Category Name</a> //This is a linked category name
   </div>
</container>

问题是，当我删除“类别：”时，它也会删除并留下一个未链接的“类别名称”

jquery 运行后 html 如下所示：

 <container>
   <div class="categories">Category Name</div>
</container>

我需要保持链接处于活动状态，因为我希望用户能够单击“类别名称”以保持不变。

Answer 1

一种方法，不知道它是否是最好的方法，是将锚元素保存为 javascript 变量。然后，在您删除要删除的内容后，将锚重新注入。

Answer 2

试试这个...

$("div.categories").each(function() {
    var $this = $(this);
    $this.html($this.html().replace("categories: ", ""));
});

Answer 3

要删除 atextNode您需要使用contents()来检索它们，然后是 and 的组合filter()，remove()如下所示：

$('.categories')
    .contents()
    .filter(function() { return this.nodeType == 3; })
    .remove();

示例小提琴

请注意，这将删除所有直接子文本节点。如果要按节点的文本进行过滤，请相应地修改filter()函数。