Question

I have the following:

<div id="abc">
</div>

Inside that div there can be one only of the following:

<p class="message">
<p class="message error"></p>
<p class="message warning"></p>
<p class="message success"></p>
<p class="message loading"></p>

Is there a way that I can find and remove only the class from the <p> element that’s NOT “message”. I realize I could remove everything and then add what I need with .removeClass() but this won’t work for me as after I previously added the message class I did some CSS changes and these will be lost if I remove all and then add again the message class.

Answer 1

Simply set the class to "message". It doesn’t get simpler or more semantically meaningful than simply doing it. There is no need to add or remove or filter or otherwise manipulate classes here.

$('#abc .message').attr("class", "message");

This also seems to meet your criteria as it doesn’t “remove all”, it simply sets the class to "message". At no point is the class message removed from the elements.