Geek Answers Handbook

Removing a dynamic row from a row in jQuery

I have an html line that includes a table tag. In the table tag can be all kinds of labels (tr / td, etc.).

How to remove a tag from my line while keeping the rest of the html?

Those:

If my line

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

then I would like the result to be

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

Edit:

Providing some additional information: I have no control over html, and p is just an example, it can be any combination of tags or plain text outside (although there will be only one table)

Edit 2:

See above "How to remove a tag from my string while retaining the rest of the html?" This means that if (outside the table) there is an element highlighted in bold or underlined, then this tag should not stop

+4
source share
5 answers

Use delete method

This will work if the browser allowed you to put a block element, for example table inside 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 really dealing with tables inside paragraphs in the DOM , then this is a whole different worm from worms, and I'm not sure how to clear this client-side clutter consistently.

If p is just a bad choice in your example, then all my examples should work with replaced p .

+1
source

Just split all the tags and then add the remaining (raw text) inside the p element. No regular expressions, no rocket science.

+3
source

Simple and clear request.

But the table should not include inside the p tag. you need to use another html tag. I used div instead of p.

 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);
+1
source

You can use the following code to remove tags.

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

Check the fiddle .

0
source

I think that you, html output are wrong, it will be displayed as soon as you execute this HTML code in the 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 the "p" tag, you just get "testing" as the output. If the html is delivered correctly, you can try to delete the table using

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

Then you can get the desired result. Hope this helps you.

-one
source

More articles:


All Articles