Question

So, I am pretty stumped as to how to exclude a sub children from getting selected in JQuery…

Here is my HTML structure in my string:

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

Note: I didn’t choose this. I am trying to parse the text “Text I want to extract here” out of this structure that comes from some arbitrary xml feed.

Here is my test JQuery: (d is the HTML string)

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

The first line does not remove the table. I test the selector and it does manage to select the element. Am I using the wrong method to remove the element?

I had also tried using not() and replaceWith() with no luck.

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

and

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

I am open to other selection methods that will retrieve only the text within that specific td.

Answer 1

You state that “d is the HTML string”.

This means that when you do this:

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

…you’re creating elements from the same unmodified string twice.

---

You need to create elements out of it once, then cache those elements.

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

---

Or, because of jQuery’s .end() method, you could do it all in one shot like this:

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

JSFIDDLE DEMO