how to remove an element in html string with jQuery

Question

I have a Html String and I want to parse it to html and then remove any pre tags and it's children. I tried this:

HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function (){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;}&lt;/script&gt;</pre>";
var $jQueryObject = $($.parseHTML(HTMLString));
alert($jQueryObject.find('pre').length);

but this alert me 0 that means it can't find any pre tag. can anyone tell me what's wrong with my code?

this is my fiddle

 HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function (){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;}&lt;/script&gt;</pre>"; var $jQueryObject = $($.parseHTML(HTMLString)); alert($jQueryObject.find('pre').length); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Answer 1

 HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function (){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;}&lt;/script&gt;</pre>"; var $jQueryObject = $("<div/>").html(HTMLString); console.log("Befor Remove tag: "+ $jQueryObject.find('pre').length); $jQueryObject.find('pre').remove(); console.log("After Remove tag: "+ $jQueryObject.find('pre').length); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Answer 2

It's not working because <pre> is in root level of the string. For that case filter() works but it would not find another <pre> if it was nested inside another of your elements

Typically you want to insert the string into another container and use find() on that other container so you don't need to worry about nesting levels.

 HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function (){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;}&lt;/script&gt;</pre>"; //changing your code to use `filter()` var $jQueryObject = $($.parseHTML(HTMLString)); console.log('Filter length:', $jQueryObject.filter('pre').length) // Using `find()` within another container var $container = $('<div>').append(HTMLString); console.log('Find length:', $container.find('pre').length) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Answer 3

You need to create a DOM tree using your HTML string by appending to a DOM element, then you can use find() to get the pre tag element.

 var HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function (){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;}&lt;/script&gt;</pre>"; var $jQueryObject = $('<div>').append($(HTMLString)); console.log($jQueryObject.find('pre').length); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>