how to remove a specific css from a div without adding an inline style?

Question

clicking on the button I need to remove the following css setting from #tg:

.wrap div{
text-align:justify;
text-align-last:left;
}

and add a acenter class - i.e. making it aligned center

#tgx.should not be changed

I can do it by $('#tg').css(...) but it adds an inline style which I want to avoid

$('button').on('click', function(){
  $('#tg').addClass('acenter');
});

.wrap div{
text-align:justify;
text-align-last:left;
}

.acenter{
  text-align:center;
  text-align-last:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
<div class='tg' id='tg'>lorem ipsum</div>
<div class='tgx' id='tgx'>dolor sit</div>
</div>
<button>CLICK</button>

Do you mean you want to dynamically add the acenter css properties to .wrap div css? Are you saying you don't want to use .addClass either? — fdomn-m
– fdomn-m, Commented Sep 26, 2021 at 9:05
You don't need to remove the text-align:justify if you add text-align:center after as that's how css works - the last defined property takes priority. — fdomn-m
– fdomn-m, Commented Sep 26, 2021 at 9:12
@freedomn-m - click on button should result in #tg - centered - without affecting #tgx and without using inline style — qadenza
– qadenza, Commented Sep 26, 2021 at 9:28

Tuan Dao · Accepted Answer · 2021-09-26 09:32:10Z

1

You can add for them a class. For example, I add for them class oldClass. Then I can remove it by $('#tg').removeClass('oldClass');.

$('button').on('click', function() {
  $('#tg').addClass('acenter');
});

.wrap div {
  text-align: justify;
  text-align-last: left;
}

.acenter {
  text-align: center !important;
  text-align-last: center !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap'>
  <div class='tg' id='tg'>lorem ipsum</div>
  <div class='tgx' id='tgx'>dolor sit</div>
</div>
<button>CLICK</button>

Update: I updated another solution by using !important to overwrite CSS because the author cannot add the HTML structure.

edited Sep 26, 2021 at 9:32

answered Sep 26, 2021 at 9:06

Tuan Dao

2,8151 gold badge14 silver badges21 bronze badges

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

5 Comments

qadenza Over a year ago

unfortunatelly I can't. starting scenario is - as is

Tuan Dao Over a year ago

@qadenza Could you change the CSS?

Tuan Dao Over a year ago

@qadenza I add another solution by add !important in .acenter CSS.

qadenza Over a year ago

seems it works. I'm just afraid if there is any hidden downside of using !important

Tuan Dao Over a year ago

@qadenza just make sure the order of .acenter in loaded CSS is the last. It will be fine.

Collectives™ on Stack Overflow

how to remove a specific css from a div without adding an inline style?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related