无法从具有“ aspNetHidden” CSS类的字符串中删除HTML标签

Question

I am compiling a web user control into HTML and it's returning the HTML with view states enclosed in DIVs with class as aspNetHidden . But these DIVs are ruining my page's design and I am trying to remove them using following JQuery code:

var c ='<div class="aspNetHidden"><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="fEButj6b8aiQphz0BrJAJplpNUO1v+7wkyuy4bE4UQ9jy524kYG+mAVtVvxdfpWnKqmCQfVCiHrx21/GiUZe9w==" /></div><div>Code from web user control</div><div class="aspNetHidden"><input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C21772F6" /></div>';
var $c = $(c);
$c.find('.aspNetHidden').remove();
console.log($c.html());

But this code is returning this:

<input name="__VIEWSTATE" id="__VIEWSTATE" value="fEButj6b8aiQphz0BrJAJplpNUO1v+7wkyuy4bE4UQ9jy524kYG+mAVtVvxdfpWnKqmCQfVCiHrx21/GiUZe9w==" type="hidden">

Instead of this:

<div>Code from web user control</div>

Please tell me what's going wrong? And if possible in C# then please also provide me a server side code too.

Answer 1

The problem is in line var $c = $(c); , if you log the initial value of $c

var $c = $(c);
console.log($c.html())

You would see the problem. It just takes the first aspNetHidden as $c and others are ignored.

Fiddle

The issue is, whenever you wrap a html string with $() , it creates an object with the parent. And your input c had just 3 <div>s without a parent, so it just takes the first div as input and creates an object.

---

Final Code:

Try this,

var $c = $('<div/>',{html:c});

//or var $c = $('<div'+c+'</div>');

$c.find('.aspNetHidden').remove()

Updated Fiddle

Answer 2

What exactly do you want to do ?

You are getting just this, because it is first element in an $c array

<input name="__VIEWSTATE" id="__VIEWSTATE" value="fEButj6b8aiQphz0BrJAJplpNUO1v+7wkyuy4bE4UQ9jy524kYG+mAVtVvxdfpWnKqmCQfVCiHrx21/GiUZe9w==" type="hidden">

according to this http://api.jquery.com/html/ $c.html() Get the HTML contents of the first element in the set of matched elements

if you want to get this line

<div>Code from web user control</div>

try this

var c ='<div class="aspNetHidden"><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="fEButj6b8aiQphz0BrJAJplpNUO1v+7wkyuy4bE4UQ9jy524kYG+mAVtVvxdfpWnKqmCQfVCiHrx21/GiUZe9w==" /></div><div>Code from web user control</div><div class="aspNetHidden"><input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C21772F6" /></div>';
var $c = $(c);
//$c.find('.aspNetHidden').remove();
console.log($c.get(1));