jQuery .removeAttr(): Delete HTML Attributes

jQuery Reference

.removeAttr() deletes named HTML attributes from every matched element. Deletion differs from setting an empty string, and multiple names can be separated by spaces.

Syntax and behavior

$("#name").removeAttr("placeholder");
$("#name").removeAttr("placeholder title");

Pass attribute names as a string without a leading dot or hash. The method returns the original jQuery object. Removing an absent attribute is harmless. Removing placeholder clears its hint, but does not clear the input’s current value.

The official jQuery .removeAttr() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery removeAttr example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<label for="name">Name</label>
<input id="name" type="text" placeholder="Example: Alex Kim" title="Name hint">
<button id="remove" type="button">Remove hint attributes</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#remove").on("click", function () {
        $("#name").removeAttr("placeholder title");
        $("#output").text("placeholder present: " + document.getElementById("name").hasAttribute("placeholder") +
          " / Current value: " + $("#name").val());
      });
    });
  </script>
</body>
</html>

Expected result

Type a name before clicking Remove hint attributes. Both placeholder and title disappear, and the output shows placeholder present: false, while the typed name remains. Reloading restores the original attributes.

Empty value versus deleted attribute

$("#name").attr("placeholder", "");
console.log(document.getElementById("name").hasAttribute("placeholder")); // true
$("#name").removeAttr("placeholder");
console.log(document.getElementById("name").hasAttribute("placeholder")); // false

Both cases hide the hint text, but only the second removes the attribute. CSS or scripts using the [placeholder] selector can distinguish them.

Important details and troubleshooting

For current states such as disabled and checked, set the DOM property directly with .prop("disabled", false) or .prop("checked", false). Attribute deletion and current-state changes should not be treated as interchangeable.
ARIA means Accessible Rich Internet Applications. Removing an ARIA attribute can remove information used by assistive technology. To communicate a collapsed state, set aria-expanded to "false" rather than deleting it.
Removing an onclick attribute does not remove a handler registered with .on(). Manage jQuery event handlers with the matching .off() call.

Compare the behavior with .attr() and HTML attributes, .val() and current input values.

jQuery Reference

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery .removeAttr(): Delete HTML Attributes

Compare deleting an attribute with setting an empty value, and handle input values, current properties, and ARIA attributes correctly.

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.

jQuery .append(): Insert Content as the Last Child

Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.