Removing a dynamic string from a string in JQuery

Question

I have a string of html which includes within it a table tag. There may be all sorts of tags (tr's/td's etc) within the table tag.

How do I remove the tag from my string, while keeping the rest of the html?

Ie:

If my string is

"<p>testing<table><tr><td>cell 1</td></tr></table> a table</p>"

then I'd like the result to be

"<p>testing a table</p>"

Edit:

Providing some more details: I don't have control over the html, and the p is just an example, it could be any combination of tags or plain text outside the (although there will only be 1 table)

Edit 2:

See above 'How do I remove the tag from my string, while keeping the rest of the html?' This means that if (outside the table) there is an element that is bolded or emphasised, then that tag should not be stopped out

That example strips ALL html, I don't want to do that, only the table tag — Evonet
– Evonet, Commented Aug 21, 2015 at 6:18
Look at my updated answer. At the bottom you'll find exactly what you want. — demux
– demux, Commented Aug 21, 2015 at 7:14

Matt Komarnicki · Accepted Answer · 2015-08-21 06:15:28Z

3

Simply strip all tags and then append what was left (raw text) inside p element. No regular expressions, no rocket science.

answered Aug 21, 2015 at 6:15

Matt Komarnicki

5,4728 gold badges51 silver badges101 bronze badges

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

2 Comments

Evonet Over a year ago

The p element is an example, there may be other tags outside the table that I need to keep. Ie "<p>testing<table><tr><td>cell 1</td></tr></table> a table and here's some <strong>bold</strong> text</p>"

Matt Komarnicki Over a year ago

OK. You didn't write this while I was answering. :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

Use the remove method

This would work if the browser allowed you to put a block element such as table inside a p:

var p_el = $("<p>testing<table><tr><td>cell 1</td></tr></table> a table</p>")
# Note: This gets slit into 3 elements: p, table, p. This would not
#       happen with a table inside a block element like a `div`

# Find all table elements and remove them:
p_el.find('table').remove()

# If you want the string back you can do:
p_el[0].outerHTML  # p_el[0] gets the DOM object from the jQuery object

# If the string has already been rendered, then of course you should use the 
# appropriate selector to find the `table` elements within `p` elements and then remove them:
$('.someParentEl p table').remove()

# If you need to remove multiple types of elements, then a more elaborate
# selector can be used within remove. I recommend reading up on jQuery selectors
# But an example might be to exclude div tags as well:
$('.someParentEl p').find('table, div').remove()

# What I suspect is that you actually want to remove all block elements from the string
# (table, div, etc. leaving b, i, strong, span, etc.):
$('.someParentEl p *').filter(function(index) {return $(this).css("display") === 'block'}).remove()
# Note: This will only work on elements already in the DOM.

Related: Why is <table> not allowed inside <p>
And: Nesting block level elements inside the <p> tag... right or wrong?

If you are indeed dealing with tables inside paragraphs in your DOM then this is a whole another can of worms, and I'm not sure how to consistently clean up that mess on the client side.

If the p is just an unfortunate choice in your example, then all my examples should work with the p replaced.

Why is this downvoted? If he uses jQuery this is a pretty good way.

Umesh Sehta · Accepted Answer · 2015-08-21 06:32:53Z

1

Simple and easy to understand the query.

But table should not include inside p tag. you need to use other html tag. I have used div instead p tag.

var stag="<div>testing<table><tr><td>cell 1</td></tr></table> a table</div>";

function removeTag(text, selector) {
    var content= $(text);
    content.find(selector).remove();
    return content.text();
}

var pString = removeTag(stag, "table");
alert(pString);

edited Aug 21, 2015 at 6:32

answered Aug 21, 2015 at 6:23

Umesh Sehta

10.7k5 gold badges43 silver badges68 bronze badges

11 Comments

demux Over a year ago

Why did you create a function for this? This is a very simple task for jQuery. Also, by using the .text() function, you get only the text inside the p tag, stripping both the p tags from the string and any other tags within the string.

Umesh Sehta Over a year ago

I just not create function for this specific task. This function can be used for any selector element. Just need to pass html string and removing selector.

demux Over a year ago

$(str).remove('table')[0].outerHTML does the job and is much more descriptive of the action being performed. No need to complicate things.

Umesh Sehta Over a year ago

OK, but I think it will not work, Are u sure is it work? $(str).remove('table')[0].outerHTML

demux Over a year ago

Yeah, dude, just open developer tools in your browser on a page with jQuery and test it. Only takes a few sec...

|

Mahendran Sakkarai · Accepted Answer · 2015-08-21 09:50:28Z

0

You can use the following code to remove the tags.

$('tag_to_remove').contents().unwrap();

Check this fiddle.

edited Aug 21, 2015 at 9:50

answered Aug 21, 2015 at 6:55

Mahendran Sakkarai

8,5796 gold badges46 silver badges66 bronze badges

Comments

Ashish Ranade · Accepted Answer · 2015-08-21 06:42:40Z

-1

I think you html output is wrong it will show like this when you execute this html in browser

 <p>testing</p>
    <table>
        <tbody>
            <tr>
                <td>cell 1</td>
            </tr>
        </tbody>
    </table>
    a table

So when you try to get the text inside "p" tag you will just get the "testing" as output. If the html comes correctly then you can try to remove table using using

$('p table').remove();

Then you are able to get desired output. Hope this will help you.

answered Aug 21, 2015 at 6:42

Ashish Ranade

6053 silver badges14 bronze badges

3 Comments

Evonet Over a year ago

I don't have control over the html, and the <p> is just an example, it could be any combination of tags or plain text outside the <table> (although there will only be 1 table)

Ashish Ranade Over a year ago

Ok you can remove table tag from your selector i.e id,class or from the body whatever suits you using .remove(). I tried to remove table tag from whole html document and it works here is my code

Ashish Ranade Over a year ago

<!DOCTYPE html> <html> <body> <script src="code.jquery.com/jquery-1.11.3.js"></script> <p>testing<table><tr><td>cell 1</td></tr></table> a table</p> <a href="google.com" >Try it</a> <script> $(document).ready(function () { $('table').remove(); }); </script> </body> </html>

Collectives™ on Stack Overflow

Removing a dynamic string from a string in JQuery

5 Answers 5

2 Comments

Use the remove method

1 Comment

11 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Use the remove method

1 Comment

11 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related