## jQuery `undelegate()` Method
The `undelegate()` method is an inbuilt jQuery method used to remove one or more event handlers that were previously attached using the [`delegate()`](event-delegate.html) method.
> ⚠️ **Deprecation Notice:** As of jQuery version 1.7, the [`.on()`](event-on.html) and [`.off()`](event-off.html) methods are the preferred and modern standards for attaching and removing event handlers. The `undelegate()` method is maintained primarily for backward compatibility with legacy codebases.
---
## Syntax and Parameters
### Syntax
```javascript
$(selector).undelegate(selector, event, function)
```
### Parameters
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `selector` | *String* | **Optional.** Specifies the selector of the descendant elements from which to remove the event handler. |
| `event` | *String* | **Optional.** Specifies one or more event types (such as `click`, `dblclick`, or `mouseover`) to remove from the elements. |
| `function` | *Function* | **Optional.** Specifies the name of the specific handler function to be removed. |
---
## Code Examples
### Example 1: Remove All Delegated Event Handlers
To remove all event handlers attached via delegation from all elements inside the ``:
```javascript
// Removes all delegated event handlers from the body element
$("body").undelegate();
```
### Example 2: Remove a Specific Event Type from Targeted Elements
The following example demonstrates how to remove only the `click` event handlers from all `
` elements delegated by a container div:
```html
Click this paragraph to make it slide up.
Click this paragraph to make it slide up.
```
### Example 3: Remove a Specific Named Function
If you have multiple handlers attached to the same event, you can target and remove only a specific function by passing its name as the third parameter:
```javascript
$(document).ready(function(){
// Define named functions
function changeColor() {
$(this).css("background-color", "lightblue");
}
function changeFontSize() {
$(this).css("font-size", "24px");
}
// Delegate both functions to
elements
$("div").delegate("p", "click", changeColor);
$("div").delegate("p", "click", changeFontSize);
// Remove only the changeColor function
$("button").click(function(){
$("div").undelegate("p", "click", changeColor);
});
});
```
---
## Best Practices & Modern Alternatives
While `undelegate()` is still functional in modern jQuery versions, it is highly recommended to use the [`.off()`](event-off.html) method for modern web development.
Here is how the legacy `undelegate()` syntax maps to the modern `.off()` syntax:
| Legacy Syntax (`undelegate`) | Modern Syntax (`off`) |
| :--- | :--- |
| `$("container").undelegate();` | `$("container").off();` |
| `$("container").undelegate("p", "click");` | `$("container").off("click", "p");` |
| `$("container").undelegate("p", "click", myFunction);` | `$("container").off("click", "p", myFunction);` |
YouTip