javascript - how to remove an element in html string with jQuery - Stack Overflow

admin管理员组

文章数量:1310306

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=".9.1/jquery.min.js"></script>

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

• javascript
• jquery
• html-parsing

Share Improve this question Follow asked Dec 25, 2017 at 13:29 MosijavaMosijava 4,18944 gold badges3131 silver badges4040 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

本文标签： javascripthow to remove an element in html string with jQueryStack Overflow