jQuery .removeAttr() Method

What You’ll Learn

The .removeAttr() method removes HTML attributes from matched elements. This tutorial covers the single- and multi-attribute API (space-separated since 1.7), equivalence with .attr(name, null), comparisons with .removeProp() and .removeClass(), the IE onclick caveat, and five official and practical jQuery demos.

Introduction

HTML attributes decorate elements in markup — title for tooltips, alt on images, required on form fields, and aria-* for accessibility. When JavaScript needs to strip those attributes at runtime, jQuery provides .removeAttr().

Available since jQuery 1.0, .removeAttr() wraps the native removeAttribute() function with two key advantages: it operates on a jQuery collection (removing from every matched element) and it accounts for inconsistent attribute naming across browsers. Since jQuery 1.7, a single call can remove multiple attributes by passing a space-separated list.

Removing an attribute is equivalent to calling .attr(name, null). For live DOM properties — especially inline event handlers like onclick in older Internet Explorer — reach for .prop(name, null) instead.

Understanding the .removeAttr() Method

Given a jQuery object representing one or more DOM elements, .removeAttr(attributeName) removes the named attribute from each element in the set. The method returns the original jQuery object for chaining — for example, $("input").removeAttr("title").addClass("clean").

Attributes live in HTML markup; properties are live DOM state. Removing an attribute does not always reset the corresponding property — the IE onclick case is the most common pitfall. For CSS classes, prefer .removeClass() over stripping the entire class attribute unless you need to remove the attribute itself.

📝 Syntax

jQuery .removeAttr() accepts one argument form:

Remove attribute(s) — since 1.0 (multi-name since 1.7)

.removeAttr( attributeName )

• attributeName — a single attribute name, or since jQuery 1.7 a space-separated list of attributes to remove.
• Removes the attribute from every matched element.
• Returns the original jQuery object (for chaining).

Return value

• Always returns the original jQuery object — enabling method chaining.

Equivalent removal with .attr()

Passing null as the value to .attr() removes the attribute the same way:

// These are equivalent
$("div").removeAttr("title");
$("div").attr("title", null);

WARNING: inline onclick in IE

Removing an inline onclick handler with .removeAttr() does not work reliably in Internet Explorer 8, 9, and 11. Use .prop() instead:

// Correct — clears the live onclick property
$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick);



// Unreliable in IE 8, 9, 11
// $element.removeAttr("onclick");

Official jQuery API example

var inputTitle = $( "input" ).attr( "title" );
$( "button" ).on( "click", function() {
  var input = $( this ).next();
  if ( input.attr( "title" ) === inputTitle ) {
    input.removeAttr( "title" );
  } else {
    input.attr( "title", inputTitle );
  }
  $( "#log" ).html( "input title is now " + input.attr( "title" ) );
});

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and practical patterns. Use DevTools or the Try-it links to run each snippet in the browser.

var inputTitle = $( "input" ).attr( "title" );
$( "button" ).on( "click", function() {
  var input = $( this ).next();
  if ( input.attr( "title" ) === inputTitle ) {
    input.removeAttr( "title" );
  } else {
    input.attr( "title", inputTitle );
  }
  $( "#log" ).html( "input title is now " + input.attr( "title" ) );
});

With title: hover shows tooltip, log shows "Hover me for tooltip"
After removeAttr: title is undefined, no tooltip on hover

$( "#box" ).removeAttr( "title data-role data-version" );
$( "#log" ).html(
  "title: " + $( "#box" ).attr( "title" ) + "<br>" +
  "data-role: " + $( "#box" ).attr( "data-role" ) + "<br>" +
  "data-version: " + $( "#box" ).attr( "data-version" )
);

After removeAttr:
title: undefined
data-role: undefined
data-version: undefined

$( "#pic" ).removeAttr( "alt" );
// Same effect as:
$( "#pic" ).attr( "title", null );

After .removeAttr('alt'): alt is undefined
After .attr('title', null): title is undefined



Both methods remove attributes from the DOM

var $el = $( "#email" );
$el.addClass( "ok" ).removeAttr( "aria-invalid required" );
$( "#msg" ).text(
  "Removed aria-invalid and required — attrs: " + $el[ 0 ].attributes.length
);

Input border turns green (.ok class added)
aria-invalid and required removed from markup
Attribute count drops; browser no longer treats field as required

$( ".demo" ).prop( "onclick", null );
console.log( "onclick property: ", $( ".demo" )[ 0 ].onclick );
// Unreliable in IE 8, 9, 11:
// $( ".demo" ).removeAttr( "onclick" );

Before: clicking button shows alert (inline onclick)
After .prop('onclick', null): onclick property is null, no alert



.removeAttr('onclick') may leave handler active in IE

🚀 Common Use Cases

• Toggle tooltips — $("input").removeAttr("title") to hide hover text after the user dismisses a hint.
• Lazy-load cleanup — $("img").removeAttr("data-src") after copying the URL into src.
• Form validation reset — $("input").removeAttr("aria-invalid required") when input becomes valid.
• Strip deprecated data attrs — $(".widget").removeAttr("data-version data-role") after migration.
• Disable link navigation — $("a.disabled").removeAttr("href") to prevent clicks without removing the element.
• Accessibility cleanup — $("[aria-hidden]").removeAttr("aria-hidden") when content becomes visible.

📝 Notes

• Available since jQuery 1.0 — space-separated multi-attribute removal since 1.7.
• Removes attributes from every matched element; returns the jQuery object for chaining.
• Equivalent to .attr(name, null) for attribute removal.
• Uses native removeAttribute() with cross-browser attribute name normalization.
• .removeAttr('onclick') is unreliable in IE 8, 9, and 11 — use .prop('onclick', null).
• Do not use .removeProp() on native DOM properties — it is for jQuery-added properties only.
• Prefer .removeClass() over .removeAttr('class') for CSS class manipulation.

💡 Best Practices