how to remove multiple css styles from an element.style

Question

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?

So you're setting the const to elems, but then referring to it as elementos? And why would you not simply elems.each(function(){...}); — Snowmonkey
– Snowmonkey, Commented Dec 18, 2017 at 19:54
@Snowmonkey, fixed now, I'm using identifiers in spanish, sorry — assembler
– assembler, Commented Dec 18, 2017 at 19:57

epascarello · Accepted Answer · 2017-12-18 20:10:05Z

3

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>

edited Dec 18, 2017 at 20:10

answered Dec 18, 2017 at 19:55

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

8 Comments

assembler Over a year ago

your solution simplies my code, but still it only removes the first element.

epascarello Over a year ago

Than I need to see some markup since it clearly works above. You have something else different. What is the HTML of the elements you are removing?

assembler Over a year ago

My styles are being generated... If I locate the style in the browsers Elements and remove it manually then it works

epascarello Over a year ago

No clue what that means.

assembler Over a year ago

I mean: I'm testing jqwidgets for react, those components generate their styles in-line, then I need to remove those styles from a tree. When the page loads I go to the browser's inspector and locate manually these styles and remove them. then it works

|

Collectives™ on Stack Overflow

how to remove multiple css styles from an element.style

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related