Remove element from html string in JQuery

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.

you say exclude a sub children, which sub children are you trying to exclude? or do you mean exlude all of them. — Tim Joyce
– Tim Joyce, Commented Dec 2, 2011 at 17:04
It's entirely possible this isn't viable at all, but would it be easier to use a regular expression instead? — sdleihssirhc
– sdleihssirhc, Commented Dec 2, 2011 at 17:04

RightSaidFred · Accepted Answer · 2011-12-02 17:33:04Z

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

edited Dec 2, 2011 at 17:33

answered Dec 2, 2011 at 17:18

RightSaidFred

11.3k38 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abe Miessler · Accepted Answer · 2011-12-02 17:14:01Z

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.

edited Dec 2, 2011 at 17:14

answered Dec 2, 2011 at 17:06

Abe Miessler

85.7k104 gold badges324 silver badges496 bronze badges

3 Comments

RightSaidFred Over a year ago

This seems more like questions than answers.

Abe Miessler Over a year ago

@RightSaidFred, updated in an attempt to clarify what my answer is.

RightSaidFred Over a year ago

That looks better, but unfortunately your answer isn't correct. @Bri is not doing DOM selection. The d represents an HTML string out of which elements are being created.

Collectives™ on Stack Overflow

Remove element from html string in JQuery

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related