## jQuery off() Method
The `off() ` method is an inbuilt method in jQuery used to remove event handlers that were attached using the `.on()` method.
Introduced in jQuery 1.7, the `off()` method serves as a modern, unified replacement for older event-removal methods including `.unbind()`, `.die()`, and `.undelegate()`. Using `off()` is highly recommended as it simplifies the jQuery codebase and provides a consistent API for event management.
---
### Syntax
```javascript
$(selector).off(event, selector, function(eventObj), map)
```
### Parameters
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `event` | *String* | **Required.** One or more space-separated event types or namespaces (e.g., `"click"`, `"mouseover"`, or `"click.myNamespace"`). |
| `selector` | *String* | **Optional.** A selector string that matches the one originally passed to `.on()` when the event handler was attached. |
| `function(eventObj)` | *Function* | **Optional.** The specific handler function that should be removed. If omitted, all handlers for the specified event will be removed. |
| `map` | *Object* | **Optional.** A key-value map of event-to-handler pairs `{"event": function, "event": function, ...}` to be detached. |
> **Note:** To remove a specific delegated event handler, the `selector` argument passed to `.off()` must match the `selector` argument that was originally passed to `.on()`.
>
> **Tip:** If you want an event to run exactly once and then automatically remove itself, use the [`.one()`](event-one.html) method instead.
---
### Code Examples
#### 1. Basic Usage: Remove All Click Events
The following example removes all `click` event handlers from all `
` elements when a button is clicked:
```javascript
$("button").click(function(){
$("p").off("click");
});
```
#### 2. Remove a Specific Event Handler Function
If you have multiple functions attached to the same event, you can target and remove only one specific function by passing its reference:
```javascript
function changeColor() {
$(this).css("color", "red");
}
function changeSize() {
$(this).css("font-size", "24px");
}
// Attach both functions to the click event
$("p").on("click", changeColor);
$("p").on("click", changeSize);
// Remove only the changeColor handler; changeSize remains active
$("button").click(function(){
$("p").off("click", changeColor);
});
```
#### 3. Remove Delegated Event Handlers
To remove event handlers attached to dynamically created child elements, you must provide the matching selector:
```javascript
// Attach a delegated event
$("div").on("click", "p", function(){
$(this).slideUp();
});
// Remove only the delegated event from
elements inside
$("button").click(function(){
$("div").off("click", "p");
});
```
#### 4. Remove Events Using Namespaces
Namespaces make it easy to group and remove specific events without affecting other handlers:
```javascript
// Attach events with a custom namespace "myApp"
$("p").on("click.myApp", function(){
console.log("Clicked!");
});
$("p").on("mouseover.myApp", function(){
console.log("Hovered!");
});
// Remove all events under the "myApp" namespace
$("button").click(function(){
$("p").off(".myApp");
});
```
---
### Replacing Legacy Methods with `off()`
The `off()` method replaces several deprecated jQuery methods. Below is a quick reference on how to update your legacy code:
#### Replacing `.unbind()`
* **Legacy:** `$("p").unbind("click");`
* **Modern:** `$("p").off("click");`
#### Replacing `.undelegate()`
* **Legacy:** `$("div").undelegate("p", "click");`
* **Modern:** `$("div").off("click", "p");`
#### Replacing `.die()`
* **Legacy:** `$("p").die("click");`
* **Modern:** `$(document).off("click", "p");`
YouTip