Eliminate certain inline styles using jQuery

I am facing an issue with an asp menu I am using. It is automatically inserting style="width:3px;" into my menu table tds, creating an unsightly gap between my tabs. Instead of asking our developer to customize the menu just to fix this cosmetic flaw, I am exploring removing this inline style with jQuery.

Below is a simple example:

<table border="1" cellspacing="0" cellpadding="0">
   <tr>
      <td style="width:3px;">hello world</td>
   </tr>
</table>

In jQuery, I can remove all tds with the style attribute by using the following code:

$('td').removeAttr('style');

So, my question is, how can I specifically target the inline style that only contains 3px?

Take a look at my live demo here: http://jsfiddle.net/n9upF/

jquerycssinline-styles

Answer №1

Are you wondering how to specifically target td elements that have a style attribute containing only width:3px;?

You can achieve this using the Attribute Equals Selector.

$("td[style='width:3px;']").removeAttr("style");​

Answer №2

In my opinion, Evan's intention was to eliminate only the width:3px; from the style while keeping the other CSS styles intact. Therefore, here is a possible solution:

$('td').each(function(){
  if ($(this).attr('style').indexOf('3px') !== -1){
    var style = $(this).attr('style');
      $(this).attr('style', style.replace(/width: ?3px;/g, ''));
  }
});

You can view a working example here

If this is not what you were looking for, Sarfraz has also provided an alternative solution. :)

Answer №3

Hey, I have a query - is there a way to exclusively target the inline style that includes only 3px?

You can attempt this method:

$('td').each(function(){
  if ($(this).attr('style').indexOf('3px') !== -1){
    $(this).removeAttr('style');
  }
});

Check out the working demo here

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

Implement Ajax functionality in C# MVC to dynamically update the values of two dropdown filters

I have created a custom MVC web application that features a table with data that can be filtered using two dropdown menus. One dropdown allows me to select the state value of the data, while the other lets me choose if the data is closed or not (yes/no). W ...

c#jqueryasp.netajaxmodel-view-controller

Challenge encountered with numerous checkboxes

Disclosure: My experience with jQuery is limited to just one week, and I have been working with HTML/CSS for two weeks. I recently implemented a form on my website that includes checkboxes and text input fields. The main checkbox, #ship_to_billing, contro ...

jquerycheckbox

Having issues with my jQuery getJSON request. It's returning an empty response even though

I have been struggling to find a solution to this particular issue with no luck... Here is the jQuery getJSON request that I am working on: $.getJSON("http://localhost:8080/context/json/removeEntity.html", { contentId : 1, entIndex : entityIndex ...

javascriptjqueryjsongetjson

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

I have been experimenting with various methods in CSS to override the existing side nav component in Angular Material 2. mat-sidenav-container { background: white; bottom: 0px !important; /* <---- no success */ } mat-sidenav { width: 300px; ...

cssangularangular-material2

Positioning the horizontal menu and footer links to the right side of the page

Struggling to get my menu and footer links aligned all the way to the right of the page. Here's what it currently looks like http://prntscr.com/32snbr, and this is the desired alignment http://prntscr.com/32snrm I've shared the HTML code below, ...

csshtmlhtml-listsfooter

CSS Flexbox: Dealing with Overlapping Flex Items on Narrow Screens

Hey there! I've successfully created a custom timeline using flexbox, but I'm encountering an issue on smaller screens. As the window size decreases, the flex items start to overlap. Is there a way you can assist me in adding some space without d ...

cssflexboxoverlaptimeline

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

htmlcss

Design a dynamic div element for banners that adjusts to different screen

Is there a way to create a responsive div similar to the img-responsive class in Bootstrap, but for a div element that changes its height relative to its width when the window size is adjusted? For example, if you look at the slider on this website "", yo ...

jqueryhtmlcsstwitter-bootstrapresponsive

Adjusting the URL variable based on the selected checkbox option

My mobile website offers users the option of a bright or dark interface using a checkbox styled like an iPhone IOS7 switch. The functionality is working as expected, but I'm now facing an issue with passing the status of the checkbox between pages. I ...

javascriptjqueryhtmltwitter-bootstrapcheckbox

Unable to view sidebar navigation on the screen

I've been experimenting with the sidebar navigation from w3 schools, specifically trying to create a side-nav that opens from one div. You can see an example here: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stack ...

javascriptjqueryhtmlcssw3.css

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

javascriptjqueryhtmlcss

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

Utilizing a standard asp.net menu in an asp.net 4.0 web application, this setup is for a standard web application and not any version of MVC applications currently available. The issue at hand is relatively straightforward. CSS styles are applied to the d ...

asp.netcssmenupseudo-class

Switching the theme color from drab grey to vibrant blue

How can I change the default placeholder color in md-input-container from grey to Material Blue? I have followed the instructions in the documentation and created my own theme, but none of the code snippets seems to work. What am I doing wrong? mainApp. ...

javascriptcssangularjsangular-materialmean-stack

Select a Button to randomly choose another Button

I am currently developing a dynamic Bootstrap OnePage-Website using HTML, CSS, and JavaScript. The highlight of this website is the Team section where users can book appointments with one of three team members by clicking on a corresponding button beneat ...

javascriptjquerybuttonbootstrap-4

Is it possible to incorporate vector graphics/icons by simply adding a class to a span element in HTML5?

In order to add a glyphicon icon to our webpage, we simply need to include its class within a span element, as demonstrated here: <span class="glyphicon glyphicon-search"></span> We also have a few files in .ai format that can be converted to ...

javascriptcsshtmltwitter-bootstrapglyphicons

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website: <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div> <div class="panel-body"> <div class="col-md-7"> <h3><span class= ...

javascriptjquerycsstwitter-bootstrap

Tips for adjusting the property of an object that has been added to an array?

I have created an object. { "heading": [{ "sections": [] }] } var obj = jQuery.parseJSON('{"header":[{"items":[]}]}'); Then I add elements to the sections var align = jQuery.parseJSON('{"align":""}'); obj["he ...

javascriptjqueryarraysjson

A guide on linking a jQuery dialog to an HTML element once the data has been updated with an AJAX response

On my PHP page, I have implemented a jQuery script to open a dialog window. The code for this is as follows: <script type="text/javascript"> $(document).ready(function() { var $loading = $('<img src="loading.gif" ...

phpajaxjquery-uijquery

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

Guidelines on executing a function after page load in meteor

Currently, I am using cursor.observeChanges to monitor new records inserted in MongoDB and trigger a notification when that happens. The issue I am facing is that these notifications are popping up when my app is loaded for the first time or when I navigat ...

javascriptjqueryangularjsmeteorangular-meteor