jQuery .removeProp() Method

What You’ll Learn

The .removeProp() method removes properties previously set with .prop() on matched elements. This tutorial covers the official luggageCode demo, comparisons with .removeAttr() and native property reset patterns, why you must not call it on checked or disabled, legacy IE memory-leak guidance, and five hands-on jQuery examples.

Introduction

jQuery’s .prop() method can attach custom values to DOM elements — a numeric flag, plugin metadata, or a temporary reference. When that data is no longer needed, .removeProp() removes the property from every matched element.

Introduced in jQuery 1.6 alongside .prop(), this method is the mirror image of property assignment. It does not remove HTML attributes from markup — that is the job of .removeAttr(). It also should not be used to reset built-in browser properties such as checked, disabled, or selected.

The jQuery API documentation is explicit: it is almost always better to set native properties to false with .prop() than to remove them. Reserve .removeProp() for custom properties you added yourself.

Understanding the .removeProp() Method

Given a jQuery object representing one or more DOM elements, .removeProp(propertyName) deletes the named property from each element in the set. The method returns the original jQuery object for chaining — for example, $("p").removeProp("luggageCode").addClass("cleared").

After removal, reading the property with .prop(propertyName) returns undefined — the same as if the property had never been set. This differs from setting a native boolean property to false, which leaves the property present but falsy.

📝 Syntax

jQuery .removeProp() accepts one argument:

Remove property — since 1.6

.removeProp( propertyName )

• propertyName — a string naming the property to remove.
• Removes the property from every matched element.
• Returns the original jQuery object (for chaining).

Return value

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

WARNING: do not remove native properties

Built-in DOM properties behave unpredictably when removed. Reset them explicitly:

// Correct — reset native boolean state
$( "input" ).prop( "checked", false );
$( "button" ).prop( "disabled", false );



// Avoid — unexpected behavior
// $( "input" ).removeProp( "checked" );
// $( "button" ).removeProp( "disabled" );

Official jQuery API example

var para = $( "p" );
para
  .prop( "luggageCode", 1234 )
  .append( "The secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " )
  .removeProp( "luggageCode" )
  .append( "Now the secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " );

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 para = $( "p" );
para
  .prop( "luggageCode", 1234 )
  .append( "The secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " )
  .removeProp( "luggageCode" )
  .append( "Now the secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " );

The secret luggage code is: 1234. Now the secret luggage code is: undefined.

var $panel = $( "#panel" );
$panel.prop( "widgetVersion", 2 );
// ... widget runs ...
$panel.removeProp( "widgetVersion" ).removeClass( "is-active" );
$( "#log" ).text( "widgetVersion: " + $panel.prop( "widgetVersion" ) );

After destroy: widgetVersion: undefined
Panel loses is-active class; no leftover custom property

$( "#agree" ).prop( "checked", false );
$( "#log" ).html(
  "checked via .prop(): " + $( "#agree" ).prop( "checked" ) + "<br>" +
  "Use .prop('checked', false) — not .removeProp('checked')"
);

Checkbox visually unchecked
checked via .prop(): false



.removeProp('checked') is documented as unsafe for native properties

var $el = $( "#temp" );
$el.prop( "tempRef", { id: 99 } );
$el.removeProp( "tempRef" );
$el.remove();
$( "#log" ).text( "Removed element; tempRef cleared first" );

#temp node removed from document
Custom object property cleared via .removeProp() first



Prefer .data() for storing objects in new projects

var $box = $( "#box" );
$box.prop( "badgeCount", 5 );
$box.removeAttr( "title" ).removeProp( "badgeCount" );
$( "#log" ).html(
  "attr title: " + $box.attr( "title" ) + "<br>" +
  "prop badgeCount: " + $box.prop( "badgeCount" )
);

attr title: undefined
prop badgeCount: undefined



.removeAttr() strips markup; .removeProp() strips JS properties

🚀 Common Use Cases

• Temporary flags — $("tr").removeProp("isDirty") after saving row edits.
• Plugin teardown — $(".slider").removeProp("sliderInstance") when destroying a UI widget.
• One-shot markers — $("form").removeProp("submitLock") after Ajax completes.
• Legacy IE cleanup — $el.removeProp("cache") before $el.remove() when objects were stored via .prop().
• Undo custom .prop() calls — mirror every .prop("customKey", value) with .removeProp("customKey") when done.
• NOT for form state — use .prop("checked", false) and .prop("disabled", false) instead.

📝 Notes

• Available since jQuery 1.6 — paired with the .prop() API.
• Removes properties from every matched element; returns the jQuery object for chaining.
• Removes only properties set via .prop() — not a substitute for .removeAttr().
• Do not use on native properties: checked, disabled, selected, and others.
• Reset native booleans with .prop(name, false) instead of removing them.
• In IE < 9, non-primitive .prop() values could leak unless .removeProp() ran before DOM removal — prefer .data() today.
• For arbitrary JavaScript storage, use jQuery .data() rather than attaching objects with .prop().

💡 Best Practices