How To Add/Remove Multiple Attributes Using jQuery?

Are you using multiple jQuery statements to add or remove attributes to/from HTML elements? In this post, I'll share with you, how you can achieve the same in one go.

Recently in one of the projects I was working on, I had to swap attributes between two HTML elements. So I was looking out to see if I could do it in a single statement rather than adding/removing one after the other. Guess what, jQuery has a way do it.

If you’re new to jQuery and looking to include jQuery in your project, you might want to checkout getting started with jQuery.

Let us set up the stage first. We shall include <input> elements. The class on the input elements should help you to identify what we’re about to do on that particular element.

Assuming you have jQuery loaded, let us use jQuery to add/remove multiple attributes.

First, let us remove the attributes id and name and then on the second input elemement, we shall add the id and the name attributes.

In order, to remove multiple attributes, use the .removeAttr() method and separate the attributes with a space. And, to add multiple attributes, we must use Plain Object of attribute value pairs in the .attr() method.

The PlainObject type is a JavaScript object containing zero or more key-value pairs.

You can find the full working demo from JSFiddle.net. I hope you found this tutorial helpful.

References:

Leave a Reply

Your email address will not be published. Required fields are marked *