How to remove class with Javascript

Question

Another Newbie Question: I am attempting to completely remove a class from the DOM when the screen.width is smaller than or equal to 320 px. Attempting this without specifying a screen width works just fine. The class is removed from the page, but when I attempt to specify the conditional screen width it does not. Can anyone help me out here? This is what I have:

<div class="poison">Poison Text</div>

<script>
var p = document.getElementsByClassName('poison');
var cstr = "poison";
var poison = screen.width;

if (poison <= 320) {
    (var i = p.length; --i >= 0;) {
        var n = p[i];
        while (n.className.split(" ").indexOf(cstr) == -1) {
            n = n.parentNode;
        }
        n.parentNode.removeChild(n);
    }
}
</script>

It looks like you tried to write a for loop (var i = p.length; --i >= 0; ) and forgot the for — Paul Roub
– Paul Roub, Commented Jul 25, 2014 at 15:28
What is (var i=p.length; --i>=0;) supposed to be doing? Is this an if statement? A for loop? In its current state this snippet of code will not achieve anything. — James Donnelly
– James Donnelly, Commented Jul 25, 2014 at 15:28
You should have your developer console open while testing your code. — cookie monster
– cookie monster, Commented Jul 25, 2014 at 15:32
...also, I don't see the purpose of the while loop. You already know that the n element has that class, so why attempt to traverse through its ancestors? — cookie monster
– cookie monster, Commented Jul 25, 2014 at 15:34

nepeo · Accepted Answer · 2014-07-25 15:48:13Z

2

You should use media queries instead of JS for this. Add this line to your stylesheet

@media (min-width:320px){


}

and put the class/classes you wish to use at sizes above 320px inside.

You can use max-width and multiple conditions as well.

answered Jul 25, 2014 at 15:48

nepeo

5092 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bob Stokes Over a year ago

Doing it with a media query removes it from sight but the element still exists and takes up space. I would like to use javascript to remove it from the DOM thus making the space available on the page when rendered.

Collectives™ on Stack Overflow

How to remove class with Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related