CODEWITHSUNDEEP
javascriptjquery
Evonet
Evonet

Reputation: 3640

Removing a dynamic string from a string in JQuery

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

Upvotes: 4

Views: 1039

Answers (5)

Mahendran Sakkarai
Mahendran Sakkarai

Reputation: 8539

You can use the following code to remove the tags.

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

Check this fiddle.

Upvotes: 0

demux
demux

Reputation: 4654

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.

Upvotes: 1

Ashish Ranade
Ashish Ranade

Reputation: 605

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.

Upvotes: -1

Umesh Sehta
Umesh Sehta

Reputation: 10683

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

Upvotes: 1

Matt Komarnicki
Matt Komarnicki

Reputation: 5422

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

Upvotes: 3

Related Questions