Removing a class from an html element

[PASEGA]

I am working with a wordpress theme. I need to find a way to remove a class from an html element.
What are the choices to remove the col-450 and fit classes from the p tags in the markup below?

Current markup

<div class="grid col-450 fit">
<h1></h1>
<h2></h2>
<p class="p1"></p><!-- /.p1 -->
<p class="p2"></p><!-- /.p2 -->
</div><!-- /.grid -->

[chrisofarabia]

What end result are you trying to achieve?

[megazoid]

I guess you’re expecting something different than “select it and press Backspace on your keyboard”.
So explain your problem in more detailed way please

[PASEGA]

The classes control the layout of the page elements. When the viewport reaches a width of 768 px the layout breaks. By removing the col-450 and the fit classes form the p tags the layout works better. I would like to remove the classes col-450 and fit from the p tags between 768px and 980px.

[megazoid]

You can’t remove that classes depending on screen size with CSS, but you can override them.
For example, if your col-450 class sets a width:

.col-450 { width: 450px; }

you can add media query to reset it:

@media (min-width: 768px) and (max-width: 980px) {
    .col-450 { width: auto; }
}

[PASEGA]

I need to be able to remove the classes from the p tags only. The page has additional markup elements which depend on these classes.

Can de classes be removed from the p tags via javascript or perhaps move the p tags outside the scope of the class col-450 and fit?

[megazoid]

@PASEGA

I need to be able to remove the classes from the p tags only.

@media (min-width: 768px) and (max-width: 980px) {
    p.col-450 { width: auto; }
}