CODEWITHSUNDEEP
javascriptjquerycsshtml
Lynob
Lynob

Reputation: 5327

How to remove Inline CSS using JS?

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.

Upvotes: 0

Views: 754

Answers (4)

Lynob
Lynob

Reputation: 5327

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.

Upvotes: 0

PsychoMantis
PsychoMantis

Reputation: 1015

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.

Upvotes: 0

nahoj
nahoj

Reputation: 285

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.

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44087

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

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

Upvotes: 3

Related Questions