Steps for Removing Multiple CSS Styles from an Element's Style:

When my application generates inline styles, I sometimes need to remove the height, width, and max-width styles from certain elements.

I have identified the element using this code:

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

Then, I attempted the following methods:

window.$(value).css({height: '', maxWidth: '', width: ''});
window.$(value)[0].style.height = '';
window.$(value)[0].style.width = '';
window.$(value)[0].style.maxWidth = '';
window.$(value).css('height', '');             
window.$(value).css('max-width', '');
window.$(value).css('width', '');
      }
    });

However, regardless of the method used, only the first element is affected. What could be causing this issue?

javascriptjquerycss

Answer №1

You don't have to iterate with a loop; you can simply use a "starts with" selector.

  $('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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue - Enhanced Image Cropper (Error: Unable to retrieve image result from this.$refs.cropper)

I have a crop function for Vue Advanced Cropper similar to the one below: crop() { const { canvas } = this.$refs.cropper.getResult(); if (canvas) { const form = new FormData(); canvas.toBl ...

javascriptvue.js

Save user entries in a database array

I'm working on developing a platform for advertisements where users can create detailed profiles with images. To achieve this, I need to store the information in an array within a backend database for future retrieval. Below is an example of the backe ...

javascripthtmldatabasevue.js

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

javascriptphpjqueryhtml

Issue with Jquery's .html() function not functioning properly when trying to select HTML

I am currently working on a piece of code that looks like this: $price = $(element) > $('.main_paket_price').attr('name'); alert($price); Basically, I am trying to select an element inside element which has the class main_paket_pri ...

javascriptphpjqueryhtmlcss

Error occurred while fetching image from Medium story API in Next.js

While working on my Next.js app, I encountered an issue with the Medium story API. Every time I try to fetch and display an image using the API, I receive an error message stating "upstream image response failed." The specific error code is: upstream image ...

javascripthtmlnext.jsjavascript-objects

Arranging an array in reverse order (starting with underscore) can alter the attributes of the objects within

REVISION: To provide more clarity on the issue, I have recorded a bug using quicktime. Here is the link for your reference: For additional code details, please visit: ORIGINAL INQUIRY: A strange issue has come up while working with Meteor and its depen ...

javascriptarrayssortingmeteorunderscore.js

The image appears to be overlapping within the navigation bar

I'm having trouble understanding why the image is overlapping on this website. The image is enclosed in a link tag, and upon inspecting it, the link tag seems to be correctly positioned while the image appears slightly below. I can't seem to ide ...

htmlcssimagetwitter-bootstrap

Why is SVG not adjusting to the screen size properly?

How can I make an SVG fit to its parent <div>-container and resize with the screen size? My initial plan involved controlling the size of the SVG based on the percental width and height of the parent <div>-container. Looking for any suggestio ...

htmlcsssvg

Tips for showcasing checkbox options on an HTML page (utilizing ejs) following the retrieval of information from MongoDB and making it editable for the User

Currently, I store data in mongo for a multiple-choice question and indicate the correct answers. In mongo, I save them like this: question.options.option1.check = "on" for the correct answers. When I navigate to the "edit" page, I retrieve the specific ...

javascriptmongodbexpresscheckboxejs

Tips for incorporating JavaScript code into back4app.com using Objective-C:1. Start by accessing the

Currently, I am trying to retrieve "ServerDate" from back4app.com using PFCloud. Unfortunately, I have encountered the following issue: Invalid function: "getServerDate" (Code: 141, Version: 1.13.0) When I attempted to use the code below: [PFCloud ...

javascriptiosobjective-cparse-platformback4app

Tips for distinguishing between 1 and 1.00 as equal, and 1.01 as not equal in Angular

How should the number 1 be treated when the decimals are zero, for example 1.000? In this case, an alert popup should appear indicating that the numbers are the same. The maximum length of the textbox should be 7 characters. For instance, 1 and 1.00000001 ...

javascriptangularjsangularjs-directiveangularjs-ng-pattern

Is there a way to condense a paragraph of text without using a span or div element?

There is a common scenario where I often encounter this issue: <span> <p>hello world</p> </span> It involves reducing the width of a paragraph to fit the text, but unfortunately it leads to clutter in my HTML. Is there a way to ...

htmlcss

A comparison between the Composition API and traditional Plain JavaScript syntax

I'm currently exploring the necessity of utilizing the 'new' Vue Composition API. For instance, take the following component extracted from their basic example: <template> <button @click="increment"> Count is: {{ ...

javascriptvue.jsvue-composition-api

"Encountering an issue where the route function in Passport and ExpressJS is not being

When using passport for admin authentication, I am facing an issue where the redirect is not calling my function. Consequently, all that gets printed on login is [object Object] Here is my code: app.get('/admin', isLoggedIn, Routes.admin); ...

javascriptnode.jsexpresspassport.js

Adjusting the width of a Material UI drawer: Tips and tricks

Currently, I am working on implementing the Material UI drawer and anchoring it to the top of my page. It is functioning correctly, however, I am encountering an issue where I am unable to adjust the width of the drawer. Despite trying to update the width ...

javascriptcssreactjsmaterial-ui

What is the reason for the maximum alias number in the npm YAML library?

I have been utilizing the npm module yaml to convert complex, interdependent JavaScript objects into a text format that can be easily restored in Javascript. Additionally, I use this package for deep copying of deeply nested objects by serializing and then ...

javascriptnpmyaml

Retrieving a time series data set from a JSON stream

Even though ThingSpeak offers great charts, I'm interested in retrieving data from ThingSpeak and creating my own visualizations using Google Charts. When extracting a "feed" from ThingSpeak, the data is presented in a JSON object like the one below: ...

javascriptarraysjson

Clicking on a date in Vue.js Fullcalendar

My goal is to retrieve a date value from the onDateClick function of fullCalendar using vue.js and then pass this data to a prop that can be stored in my backend via Laravel. However, I am encountering various undefined errors no matter how I approach th ...

javascriptvue.jsfullcalendar

How to send out an Array and a Variable at the same time using socket.io

Currently expanding my knowledge with Node.js, Express.js, and Socket.io. I successfully created a chat application that is functional at the moment. Now I am interested in letting the Client know when a user enters or exits the chat by emitting a variab ...

javascriptnode.jssocketsexpress

What are the best practices for storing an array of objects in MongoDB with Mongoose?

For my project, I needed to store data in a mongoDB document as an array of objects using Javascript, Node JS, Express framework, and Mongoose library. After researching online, I found two different methods to achieve this: Creating another sub-schema ...

javascriptnode.jsmongodbexpressmongoose