在 JQuery 中从 HTML 字符串中删除元素

Question

我对如何在 JQuery 中排除子元素的选择感到困惑...

以下是字符串中的HTML结构：

<table>
   <tr>
       <td>some data I don't want.</td>
       <td>
       <table><tr><td>more data I don't want</td></tr></table>
       Text I want to extract here.
       </td>
   </tr>
</table>

注意：我并不是选择这个结构。我试图从一些随意的XML源中解析出“我想要提取的文本”文本。以下是我的测试JQuery代码：（d是HTML字符串）

$('tr > td:eq(1) > table', d).remove();
var c = $('tr > td:eq(1)', d).text();

第一行代码没有移除表格。我尝试了选择器，确实可以选择到该元素。我是否使用了错误的方法来删除该元素？

我也尝试过使用not()和replaceWith()，但都没有成功。

$('tr > td:eq(1)', d).not('tr > td:eq(1) > table').text();

并且

$('tr > td:eq(1) > table', d).replaceWith("");

我可以尝试其他方法，以仅检索该特定内的文本。

- Bri

---

你说“排除子级”，你是指要排除哪些子级？还是全部都要排除？ - Tim Joyce

完全有可能这根本行不通，但是 使用正则表达式会更容易吗？ - sdleihssirhc

Answer 1

您提到"d 是HTML字符串"。

这意味着当您执行以下操作时：

$('tr > td:eq(1) > table', d).remove();
var c = $('tr > td:eq(1)', d).text();

您正在从同一未修改字符串两次创建元素。

---

您需要将其创建为一次元素，然后缓存这些元素。

var $d = $(d);  // create the elements out of the string, and cache the set

$d.find('tr > td:eq(1) > table').remove();  // remove table from the cached set
var c = $d.find('tr > td:eq(1)').text(); // target the <td> and get its text

JSFIDDLE DEMO

---

或者，由于jQuery的.end()方法，您可以这样一次性完成所有操作：

var c = $(d).find('tr > td:eq(1)')
            .children('table')
            .remove()
            .end()
            .text();

JSFIDDLE DEMO

- RightSaidFred

Answer 2

什么是 d？当我创建了一个js/HTML的例子时，它似乎运行得很好。你可以在这里看到它：http://jsfiddle.net/v7Qm2/。你可能正在限制只对d进行范围，但你不应该这样做。需要澄清的是，我的答案是你的代码看起来很好，似乎也实现了你想要的功能。我认为问题在于你在不应该限制选择器的范围。

- Abe Miessler

---

这似乎更像是问题而不是答案。 - RightSaidFred

@RightSaidFred，我更新了回答，希望能更清楚地表达我的意思。 - Abe Miessler

看起来好多了，但不幸的是你的答案不正确。@Bri 没有进行 DOM 选择。d 表示一个 HTML 字符串，其中正在创建元素。 - RightSaidFred