CODEWITHSUNDEEP
javascriptjquerycss
assembler
assembler

Reputation: 3300

how to remove multiple css styles from an element.style

My application generates some inline styles. In certain point I need to remove the height, the width and the max-width styles.

I've located the element like this:

const elems = window.$('.myElements');
    window.$.each(elems, (index, value) => {
      if (value.id.startsWith('myPanel')) {

here I've tried this:

         window.$(value).css({height: '', maxWidth: '', width: ''});

and this:

         window.$(value)[0].style.height = '';
         window.$(value)[0].style.width = '';
         window.$(value)[0].style.maxWidth = '';

also this:

         window.$(value).css('height', '');             
         window.$(value).css('max-width', '');
         window.$(value).css('width', '');
      }
    });

and no matter what it always remove only the first element. What am I missing here?

Upvotes: 2

Views: 1144

Answers (1)

epascarello
epascarello

Reputation: 207511

You can use a starts with selector, no need to do the loop

  $('div[id^="myPanel"]').each( function () {

    $(this).css({
      height: Math.floor(Math.random()*200) + "px",
      width: Math.floor(Math.random()*200) + "px"
    });
  })

window.setTimeout( function () {
  $('div[id^="myPanel"]').css({
    height: '',
    maxWidth: '',
    width: ''
  });}
, 1000);
div {
  background-color: green;
  margin: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myPanel1" style="width:20px; height: 20px;">A</div>
<div id="myPanel2" style="width:20px; height: 20px;">B</div>
<div id="myPanel3" style="width:20px; height: 20px;">C</div>
<div id="myPanel4" style="width:20px; height: 20px;">D</div>

Upvotes: 3

Related Questions