1

I am not very experienced with jQuery and i have to do the following task. I want to remove class from all images in a web page without using jQuery. I was able to find this fixed with JQuery but i ll need this fixed with JavaScript. I will appreciate it if someone will be able to guide me about this. Thank you!

wplearner
  • 405
  • 6
  • 19
  • 1
    Possible duplicate of [Change an element's class with JavaScript](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) – apires Jun 09 '17 at 13:18

3 Answers3

4

A simple modern way:

[].forEach.call(document.images, x=>x.removeAttribute("class"));

another sleek newer way:

for(let img of document.images) img.className="";

an older safer way:

for(var i in document.images) if(i-.1)document.images[i].className = "";

another older way, better than the first (thanks @mplungjan):

for(var d=document.images, i=d.length-1;i;i--) d[i].removeAttribute("class");

dandavis
  • 16,370
  • 5
  • 40
  • 36
  • @Jonasw - not clear if OP wants to remove the class property or a class from it – mplungjan Jun 09 '17 at 13:24
  • @dandavis looks like too many people edited this without being involved... – Jonas Wilms Jun 09 '17 at 13:25
  • @mplungjan ive just seen *mplungjan edited* and thought you produced this editing mistake, sorry – Jonas Wilms Jun 09 '17 at 13:26
  • Thank you so much all of you for your time and help. I appreciate it. – wplearner Jun 09 '17 at 13:30
  • 1
    Which means he also tries to change the class of `document.images["length"]`, `["item"]` and `["namedItem"]` https://jsfiddle.net/mplungjan/vjw1a1dn/ - – mplungjan Jun 09 '17 at 13:38
  • @mplungjan: that's a good reason to use `for of`, but setting a prop on a number like length shouldn't break anything. feel free to edit in a `hasOwnProperty` if you think it needs it... – dandavis Jun 09 '17 at 13:40
  • @dandavis it is normal and not old fashioned to use a `for (var i=0;i<....)` on a collection in my opinion - for of is ES6 and not globally supported – mplungjan Jun 09 '17 at 13:40
  • 1
    @mplungjan: you talked me into modifying it, thanks for the suggestion! now if only i could type without massive errors... – dandavis Jun 09 '17 at 13:44
  • Lol @ `if(i-.1)` - Wow, you really must insert something hacky in all your code ;))) – mplungjan Jun 09 '17 at 13:54
  • Too bad there is no "follow" here at SO – mplungjan Jun 09 '17 at 14:09
3

Try using this function

/**
 * Removes all class attributes from all the images, if a class has been passed then it only removes that className
 * @param {string} [className=] optional parameter, only images with that className will be affected and will only lose that className
 * @returns {void}
 */
function removeImageClasses(className) {
    var validClass = typeof className === "string";
    var selector = validClass? "." + className : "";
    var list = document.querySelectorAll("img" + selector);
    for(var index = 0; index < list.length; index++) {
        if(validClass) list[index].classList.remove(className);
        else list[index].removeAttribute("class");
    }
}

This is a working demo

(function() {

  var original = '<img class="blue"><img class="blue"><img class="green"><img class=""><img class/>';
  var images = document.getElementById("image-list");

  function removeImageClasses(className) {
    var validClass = typeof className == "string";
    var selector = validClass ? "." + className : "";
    var list = document.querySelectorAll("img" + selector);
    for (var index = 0; index < list.length; index++) {
      if (validClass) list[index].classList.remove(className);
      else list[index].removeAttribute("class");
    }
  }

  function reset() {
    images.innerHTML = original;
  }

  function onClick(id, callBack) {
    document.getElementById(id).addEventListener("click", callBack);
  }

  onClick("remove-blue", function() {removeImageClasses("blue")});
  onClick("remove-green", function() {removeImageClasses("green")});
  onClick("remove-yellow", function() {removeImageClasses("yellow")});
  onClick("remove-all", removeImageClasses);
  onClick("reset", reset);
})();
#image-list {
  margin-top: 10px;
}

img {
  background-color: transparent;
  display: block;
  float: left;
  height: 50px;
  width: 50px;
}

img.blue {
  background-color: blue;
}

img.green {
  background-color: green;
}
<button id="remove-blue">Remove Blue</button>
<button id="remove-green">Remove Green</button>
<button id="remove-yellow">Remove Yellow</button>
<button id="remove-all">Remove All</button>
<button id="reset">Reset</button>
<div id="image-list">
  <img class="blue" />
  <img class="blue" />
  <img class="green" />
  <img class="" />
  <img class/>
</div>
nick zoum
  • 7,216
  • 7
  • 36
  • 80
0

This should do the task.

for(var i = 0, len = document.images.length; i < len; i++)
    document.images[i].className = "";
})
Pascal L.
  • 1,261
  • 9
  • 21