remove display:none from a css class in JS

Question

I've made this list of GoT charachters that could possible die (there's no spoilers or what so ever). The problem I'm having is that I'm supposed to remove a class but I can't make it work. I could just remove the CSS, I know but that's not what I'm trying to achieve here. I can't find the way to delete a CSS class during a JS event/function.

I can make it work by deleting the "li" tags so that part I've completed.

My HTML:

<ul class="carousel">
   <!-- <li><img src="images/cersei-lannister-1920.jpg" alt="Cersei Lannister" title="Cersei Lannister"/></li>
    <li><img src="images/daenarys-1920.jpg" alt="Daenarys" title="Daenarys"/></li>
    <li><img src="images/maetser-varys-1920.jpg" alt="Maester Varys" title="Maester Varys"/></li>-->
</ul>

MY JS:

function changeImageIndex(value){
    let charachter =["images/cersei-lannister-1920.jpg","images/daenarys-targaryen-1920.jpg", "images/maester-varys-1920.jpg", "images/margarey-tyrell-1920.jpg", "images/petyr-baelish-1920.jpg", "images/samwell-tarly-1920.jpg", "images/sansa-stark-1920.jpg"];


    let str = "<li><img src='";


    if(value === "1")
    {
        parseInt(i += 1);
        if( i > 6)
        {
            i = 0
        }
        str += charachter[i];

        console.log(str);
    }

    else{
        parseInt(i -= 1);
        if( i < 0)
        {
            i = 6;
        }

        str += charachter[i];
        console.log(str);
    }




    str += "'></img></li>";

    console.log(str);


    let HTML = document.getElementsByClassName("carousel")[0];
    console.log(document.querySelector("ul li").classList.remove("carousel"));

    document.querySelector("li").classList.remove("carousel");


    HTML.innerHTML = str;


}

MY CSS that I want gone:

.carousel li {
  display: none;
}

I hope you guys can help me out here! Thanks!

so you want to remove the class?

schylake
– schylake

2017-12-11 16:14:54 +00:00
Commented Dec 11, 2017 at 16:14 — schylake
– schylake, Commented Dec 11, 2017 at 16:14
remove the class or remove the display:none :)

Florianvdab
– Florianvdab

2017-12-11 16:18:10 +00:00
Commented Dec 11, 2017 at 16:18 — Florianvdab
– Florianvdab, Commented Dec 11, 2017 at 16:18

score 2 · Accepted Answer · 2017-12-11 16:43:25Z

2

Make a seperate class take ".hidecarousel" for display:none and add it to your CSS. Use the class name in your li tags. And then make use of the javascript to simply remove it.

var list = document.getElementsByClassName("hidecarousel");
while (list.length)
    list[0].classList.remove("hidecarousel");

Here is how you can change the CSS of all the li inside your carousel ul to block.

var array_of_li = document.querySelectorAll("ul.carousel li");
var i;
for (i = 0; i < array_of_li.length; ++i) {
  array_of_li[i].style.display = "block";
}

.carousel li {
  display: none;
}

<ul class="carousel">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

edited Dec 11, 2017 at 16:43

answered Dec 11, 2017 at 16:23

user7207170

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

6 Comments

Florianvdab Over a year ago

That's indeed a nice way to put it, but I wonder if it's doable without making a new class? Can't I just select the carousel li and remove the display:none?

user7207170 Over a year ago

Well, if you suppose that all the li in your code have the display:none criteria and you want to remove them all, then yeah it can be done without maing a seperate class which is more neater. But I don't know if you're specifically asking for changing the css from none to block, or just simply removing the display:none. If what you want is the display:none to simply go, then this is a better suited method.

Florianvdab Over a year ago

I've got one way now but I'm trying to learn as much as possible so if you know how to change the display:none that'd be handy! Thanks alot!

user7207170 Over a year ago

You can always change the element's css instead of removing the class itself. That can done by changing them from display:none to block. But anyways, if this answer helped don't forget to rate it.

Florianvdab Over a year ago

Would love to do that but I'm not high enough rated myself to upvote! Thanks alot, I'll try and figure out on how to change the CSS of the class...

|

Spleen · Accepted Answer · 2017-12-11 16:22:59Z

0

From what I understand you are not using jQuery so here is the Javascript solution for removing a class from an element.

ELEMENT.classList.remove("CLASS_NAME");

answered Dec 11, 2017 at 16:22

Spleen

333 bronze badges

Comments

Moutimedia · Accepted Answer · 2017-12-11 16:56:35Z

0

Maybe if you add a class by js and in CSS you do what you want

.carousel li.active{display:inline-block;}

Hope you can make it :)

answered Dec 11, 2017 at 16:56

Moutimedia

613 bronze badges

1 Comment

Florianvdab Over a year ago

Answer was given by the kind sir above!

Collectives™ on Stack Overflow

remove display:none from a css class in JS

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related