Mar
4

Basic jQuery Tutorial: Add Remove Attribute

By Mukesh Chapagain  //  jQuery  //  10 Comments

In this article, I will be showing you how to add or remove HTML attributes. HTML attributes like title, href, src, etc. For example:-

<img src="abc.jpg" class="test" alt="abc" />

Here: src, class, alt, title are attributes.

You can add attributes like above through jQuery. You can also remove the attributes with jQuery.

VIEW DEMO

Here is the HTML source. This contains a link with id ‘myLink’ and Add and Remove buttons with id ‘add’ and ‘remove’ respectively.

<div class="content"> <a id="myLink" href="#">This is my LINK</a> </div>   <button>Add</button> <button>Remove</button>

Adding Attribute

The following function works as follows:
- myLink is the id of a href link
- add is the id of add button
- when add button is clicked, some style (css) is added to the link with id ‘myLink’
- after that, ‘title’ attribute is added to link with id ‘myLink’

$("#add").click(function(){ $("#myLink").css({"font-weight":"bold", "color":"red", "text-decoration":"line-through"}); $("#myLink").attr("title","My Link Title"); });

Removing Attribute

The following function works as follows:
- there is a button with id ‘remove’
- when remove button is clicked, the following things happen:
- ‘style’ attribute is removed from the link with id ‘myLink’
- ‘title’ attribute is removed from the link with id ‘myLink’

$("#remove").click(function(){ $("#myLink").removeAttr("style"); $("#myLink").removeAttr("title"); });

VIEW DEMO

Cheers,

Share this:

• Share

• Share on Tumblr
• Pin It
• Email

Related posts:

Basic jQuery Tutorial: Animate div and image Basic jQuery Tutorial: Change CSS Best Beginner Tutorial For jQuery Creating a Simple Photo Album using jQuery

Tags: attribute, basic, element, HTML, jQuery, tutorial

Author: Mukesh Chapagain

Passionate about Web Technology and Web development. Loves Blogging. Keenly interested in Open Source Technology/Software/Framework.

Mukesh Chapagain has written 20 articles for us.

Share this article:

10 Comments to “Basic jQuery Tutorial: Add Remove Attribute”

• 
  Vadim March 5, 2010 at 4:59 am

  This is cool that you are writing this jQuery tutorials for beginners, but could you write some on jQuery syntax, because sometimes a beginner can get confused on parenthesis and curly brackets sets, when they gets more than two pairs.

  Reply
• WordPress Rocker March 5, 2010 at 5:04 am

  Basic jQuery Tutorial: Add Remove Attribute http://is.gd/9Gy9M #jQuery #tutorial (via @designgala)

  Reply
• Design Gala March 5, 2010 at 5:05 am

  Basic jQuery Tutorial: Add Remove Attribute http://is.gd/9Gy9M #jQuery

  Reply
• SiteSyrup March 5, 2010 at 8:30 am

  Basic jQuery Tutorial: Add Remove Attribute http://ow.ly/1exoL #jquery #tutorial

  Reply
• organic web March 5, 2010 at 9:36 am

  RT @siteSyrup: Basic jQuery Tutorial: Add Remove Attribute http://ow.ly/1exoL #jquery #tutorial

  Reply
• organic web March 5, 2010 at 1:36 pm

  RT @SiteSyrup: Basic jQuery Tutorial: Add Remove Attribute http://ow.ly/1exoL #jquery #tutorial

  Reply
• 
  max hodges July 8, 2010 at 6:44 pm

  Hi, I’m trying to remove all the TITLE attributes from the img elements on my site. WordPress is adding them, and I tried to change the WP code, but too many things depend on the title tags being in there, so I’d like to see if I can remove them with jQuery.

  I tried adding this to my head

  $(‘img’).removeAttr(“title”);

  but it’s not working.
  Any ideas? I’m very new to jQuery.

  Cheers!
  Max

  Reply
  • 
    Anders April 13, 2011 at 3:19 am

    max hodges: like this?
    <script>
    $(function() {
    $(‘img’).removeAttr(“title”);
    });
    </scripttag>

    Reply
• 
  thupten January 11, 2011 at 3:51 am

  useful info. thanks..soon:)

  Reply
• 
  v_omar May 18, 2011 at 6:10 pm

  Hello

  There is a way not to repeat several times removeAttr

  $(“#remove”).click(function(){
  $(“#myLink”).removeAttr(“style”);
  $(“#myLink”).removeAttr(“title”);
  });

  It can be used so
  $(“#myLink”).removeAttr(“style”,”title”);

  Reply