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>

Farhad Bagherlo · Accepted Answer · 2017-12-25 13:43:26Z

7

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>

edited Dec 25, 2017 at 13:43

answered Dec 25, 2017 at 13:34

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

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

Comments

charlietfl · Accepted Answer · 2017-12-25 13:52:25Z

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>

Hassan Imam · Accepted Answer · 2017-12-25 13:36:27Z

2

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>

answered Dec 25, 2017 at 13:36

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Collectives™ on Stack Overflow

how to remove an element in html string with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related