How to remove Inline CSS using JS?

Question

I have

<div class="slide slick-slide slick-current slick-active" data-slick-index="0"
aria-hidden="false" style="width: 1730px; position: relative; left: 0px; top:
0px; z-index: 999; opacity: 1;" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00">

I want to remove z-index, I tried

jQuery(document).ready(function( $ ){
    jQuery('.slick-slide).css('z-index', "");
});

and

jQuery(document).ready(function( $ ){
    jQuery('.slick-slide).css('z-index', "auto");
});

and I tried all the classes listed in the div above, nothing worked. I just want to remove the z-index, it's a wordpress site, so using JS/JQuery are my only options.

If your code is a direct copy and paste to here, try adding the missing quotes also. — PsychoMantis
– PsychoMantis, Commented Feb 2, 2019 at 22:15
are you sure the slick slide libray isn't adding z-index when it runs? so even if you remove the z-index, the library may add it back a while later. — bitten
– bitten, Commented Feb 2, 2019 at 22:16
@bitten Nothing worked, I tried all the answers and comments, I guess you are correct, what to do in that case? — Lynob
– Lynob, Commented Feb 2, 2019 at 22:54
@Tim yes because no js worked and i was so frustrated and I read your comment saying add important, which i had already added in js and did not work, therefore i tried adding it in css exactly as you just said and it worked. I have no clue why but it worked 😂 — Lynob
– Lynob, Commented Feb 3, 2019 at 0:44

Jack Bashford · Accepted Answer · 2019-02-02 22:18:59Z

3

You don't need jQuery - use Element.style.removeProperty():

document.querySelector(".slick-slide").style.removeProperty("z-index");

answered Feb 2, 2019 at 22:18

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

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

5 Comments

PsychoMantis Over a year ago

I was mid-way through typing out an epic, long, seriously awesome answer when I read this and thought "oh, there I go, overthinking it again". Just tested this out of curiosity and can confirm it works on in-line css. Good stuff!

Lynob Over a year ago

your code is working perfectly, the only problem is that it's working only when I execute it from the console and is returning 999 however when I write it as code, it is not working. That never happened to me before, in the console it works

Lynob Over a year ago

I'll try to place it somewhere else.

Jack Bashford Over a year ago

Thanks @Tim, I love it when people tell me I help them out.

Jack Bashford Over a year ago

Also @Lynob It may be that SlickSlider is interfering with your CSS and adding z-index when you try to remove it, because as Tim mentioned above, it works on inline CSS styles.

PsychoMantis · Accepted Answer · 2019-02-04 23:23:44Z

0

As requested per comments above:

Simply override .slick-slide in your CSS with !important, no JavaScript required.

.slick-slide { 
    z-index: 0 !important;
}

Edit:

0 is simply a placeholder, choose a value you see fit or set to initial for the default value of z-index.

edited Feb 4, 2019 at 23:23

answered Feb 3, 2019 at 0:48

PsychoMantis

1,0153 gold badges16 silver badges30 bronze badges

2 Comments

soulshined Over a year ago

Just a note, z-index:0; is not the same as removing it. This div could be inheriting another z-index from parent, just for example, with a negative z-index and 0 would still give it higher specificity. Just for example of why it’s not the same.

PsychoMantis Over a year ago

I agree, 0 is simply a placeholder in this instance. Edited to reflect.

Rob Kwasowski · Accepted Answer · 2019-02-02 22:38:27Z

0

If you only have z-index as inline and want to remove it you should remove the whole style attribute instead.

`$('.slick-slide').removeAttr('style');`

I see that you are using Slick Slider. I recommend not to delete any styles served by Slick. Better to write an ugly override with some CSS instead.

edited Feb 2, 2019 at 22:38

Rob Kwasowski

2,7903 gold badges16 silver badges34 bronze badges

answered Feb 2, 2019 at 22:31

nahoj

2851 gold badge4 silver badges17 bronze badges

Comments

Lynob · Accepted Answer · 2019-02-06 13:30:13Z

0

I'm adding my own answer but cannot accept it since I'm not sure it's the right answer.

The better solution is to set the parent div that you created

.example-banner { 
    z-index: 0;
}

And leave slick slider as is, that would fix the issue too. The difference is that if you do like the accepted answer suggested, like I suggested previously, you'll face an issue which is that if you click on any href, it will take you to the last href of the slider.

So lets say your slider has 5 slides and each slide has a link to an article, when you click on any of those links, you'd be taken to the last article.

edited Feb 6, 2019 at 13:30

answered Feb 6, 2019 at 11:29

Lynob

5,37516 gold badges73 silver badges135 bronze badges

Collectives™ on Stack Overflow

How to remove Inline CSS using JS?

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related