4

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.

Bri
  • 729
  • 2
  • 17
  • 38
  • you say `exclude a sub children`, which sub children are you trying to exclude? or do you mean exlude all of them. – Tim Joyce Dec 02 '11 at 17:04
  • It's entirely possible this isn't viable at all, but [would it be easier to use a regular expression instead?](http://jsfiddle.net/bemnn/) – sdleihssirhc Dec 02 '11 at 17:04

2 Answers2

3

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

RightSaidFred
  • 11,209
  • 35
  • 35
2

What is d? When I created an example of your js/HTML it seemed to run fine. You can see it here:

http://jsfiddle.net/v7Qm2/

Is it possible that you are limiting the scope to d when you should not be?

NOTE:

Just to clarify, my answer is that your code looks fine and appears to do what you want. I think the issue is that you are limiting the scope of your selector when you should not.

Abe Miessler
  • 82,532
  • 99
  • 305
  • 486