Remove inline style using jquery plugin

Question

Here is the full html:

<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
   </head>
   <body>
     <div id="test" style="width:auto;max-width:150px;"></div>
     <script>
       (function($)
       {
           $.fn.removeStyle = function(style)
           {
               var search = new RegExp(style + '[^;]+;?', 'g');

               return this.each(function()
               {
                   $(this).attr('style', function(i, style)
                   {
                       return style.replace(search, '');
                   });
               });
           };
       }(jQuery));
       $(function(){
         $('#test').removeStyle('width');
       });
     </script>
   </body>
</html>

But I have get this problem:

<div id="test" style="max-"></div>

score 3 · Answer 1 · answered Oct 31 '13 at 12:23

3

To do it the way you've posted: just modify your regex to match style, but don't match -style.

To do it the right way: you can simply use:

$('#test').css('width', '');

Here is the simple fiddle which demonstrates use of .css() to remove background.

answered Oct 31 '13 at 12:23

Michał Rybak

8,648
3
42
54

score 2 · Accepted Answer · answered Oct 31 '13 at 12:39

I think you don't want to remove all styles, just the width: auto;

The regex matches *width:*, so it matches max-width: 150px;.

Try this instead:

var search = new RegExp('(^|;)' + style + '[^;]+;?', 'g');

This regex will expects a) the beginning of the string or b) a semicolon before it matches another part of the string.

See also here: http://jsfiddle.net/P5dfz/

score 1 · Answer 3 · answered Oct 31 '13 at 12:23

1

You should use jQuery's .css() to manipulate styles:

$('#test').css("width","");

answered Oct 31 '13 at 12:23

Benoit Blanchon

13,364
4
73
81

score 1 · Answer 4 · answered Oct 31 '13 at 12:33

(function($)
   {
       $.fn.removeStyle = function(style)
       {
           var search = new RegExp(style + '[^;]+;?', 'g');

           return this.each(function()
           { 
               $(this).css(style,'');
               /*$(this).attr('style', function(i, style)
               { 
                   return style.replace(search, '');
               });*/
           });
       };
   }(jQuery));
   $(function(){
     $('#test').removeStyle('width');
   });

Modified your function please see fiddle http://jsfiddle.net/UA9CF/

please remove `var search`, it's unnecessary here. – Michał Rybak Oct 31 '13 at 13:04 — Michał Rybak, Oct 31 '13 at 13:04

score 0 · Answer 5 · answered Oct 31 '13 at 12:29

0

If you want to remove complete inline style attribute then you can simple use this.

$('#test').removeAttr('style');

answered Oct 31 '13 at 12:29

Peeyush

4,728
16
64
92

Manish Mishra · Answer 6 · 2013-10-31T12:37:53.700

but you asked, how to remove inline-style, so if you want to remove the entire style tag from certain elements in a given scope you can try out something like below:

say your markup is like this:

<div id="parent">
   <div style="background-color:red; width:100px; height:100px" >
      <div style="background-color:green; width:50px; height:50px" >
      </div>
   </div>
</div>
<div style="background-color:#CCC; width:50px; height:50px" >
</div>

and you want to remove style tags of the elements inside the div with id parent:

$('div',"#parent").removeAttr('style'); //$(selector, scope)

or something even simple:

$("#parent").find('div,a').removeAttr('style'); //div,a or other element types

Remove inline style using jquery plugin

6 Answers6