Sev
Sev

Reputation: 781

Removing CSS class from <li> tag in ASP.net from code behind

I add a css class to my li tag like following:

liComPapers.Attributes.Add("class", "NoDisplay");

Is there any way to remove this specific class (NoDisplay) from that li tag somewhere else in my code?

I have tried the following code but it is not working.

liComPapers.Attributes["class"] = ""; 

Thanks

Upvotes: 9

Views: 24658

Answers (6)

Seven
Seven

Reputation: 825

Suggested method

liComPapers.Attributes["class"] = liComPapers.Attributes["class"].Replace("NoDisplay", "");    

will cut another css classes that contains string "NoDisplay" and will cause errors

E.g.

<li class="NoDisplay AnotherClass-NoDisplay"></li>

becomes

<li class=" AnotherClass-"></li>

So, more safely solution would be

liComPapers.Attributes["class"] = String.Join(" ", liComPapers.Attributes["class"]
                                        .Split(' ')
                                        .Where(x => x != "NoDisplay")
                                        .ToArray());

Upvotes: 2

Boopathi.Indotnet
Boopathi.Indotnet

Reputation: 1390

liComPapers.Attributes.Remove("class");

we can remove the CSS attribute for the Particular li tag

Upvotes: 2

Curtis
Curtis

Reputation: 103428

If I understand correctly:

If you wish to remove only NoDisplay, you could replace that part of the string with an empty string:

liComPapers.Attributes["class"] = liComPapers.Attributes["class"].Replace("NoDisplay", "");

However, .Add("class", "NoDisplay") won't add a new class to your class attribute. It will create a new class attribute with the value NoDisplay. Therefore if your markup is currently:

<li class="myClass"></li>

It would become:

<li class="myClass" class="NoDisplay"></li>

This is invalid markup.

To append new classes to an element with existing classes, you can do:

liComPapers.Attributes["class"] += " NoDisplay";

This would then render:

<li class="myClass NoDisplay"></li>

Upvotes: 7

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

I've just made a sample to test your code, and found that the following part will do exactly what you want:

 var newClassValue = liTest.Attributes["class"].Replace("NoDisplay", "");
 liTest.Attributes["class"] = newClassValue;

Tested and Working: if (for some reason) the above code didn't work, I would recommend another approach, which is similar to the previous, with another way to replace the class value

var newClassValue = liTest.Attributes["class"].Replace("NoDisplay", "");
liTest.Attributes.Remove("class");
liTest.Attributes.Add("class",newClassValue);

Upvotes: 8

Luferogo
Luferogo

Reputation: 23

Your code seems right. Check this link: How to: Set HTML Attributes for Controls in ASP.NET Web Pages

Are you using callbacks/ajax? Maybe you are not considering that..

Try to do a simple page with only one control and put a button to do a postback , on the button's click event (server side) assign the attribute the same way you did before. It should works.

Upvotes: 0

IrishChieftain
IrishChieftain

Reputation: 15252

Try the following:

liComPapers.Attributes.Remove("class");

AttributeCollection.Remove Method

Upvotes: 1

Related Questions