jQuery Event die() Method

Quiz

The jQuery event die()Â method is used to remove one or more event handlers from elements, which were previously attached using theÂ live()Â method. To remove multiple event handlers, ensure that the event values are separated by spaces.

The jQuery die() method was deprecated in version 1.7 and removed in version 1.9. You can now use the jQuery off() method instead.

Syntax

Following is the syntax of the jQuery event die() method −

$(selector).die(event, function)

Parameters

This method accepts two parameters, 'event' and 'function', which are explained below −

event − It specifies the one or more event handlers that need to be removed from elements.
function − It specifies a specific function that needs to be removed.

Return Value

This method removes one or more event handlers from elements, without returning any value.

Example 1

Removing single event handler from the elements.

The following program demonstrates the usage of the jQuery event die() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
.demo{
    color: white;
    background-color: black;
    width: 200px;
}
</style>
</head>
<body>
    <h4>Click on any p element to apply class</h4>
    <p>paragraph 1.</p>
    <p>Paragraph 2.</p>
    <button>Click me to remove event handler from the above paragraphs.</button>
<script>
    $(document).ready(function(){
      $("p").live("click", function(){
        $(this).toggleClass('demo');
      });
      $("button").click(function(){
        $("p").die();
      });
    });
</script>
</body>
</html>

Output

After executing the program, two paragraphs and a button will be displayed. When a user clicks on any paragraph, theÂ demoÂ class will be applied to it. If a user clicks on the button, the event handler for the paragraphs will be removed −

When the user clicks on any paragraph −

Example 2

Removing multiple event handlers from the elements.

The following is an example of theÂ jQuery eventÂ die()Â method. We first use theÂ live()Â method to attach an event handler to elements, and then we remove the event handlers added by theÂ live()Â method using theÂ die()Â method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <h4>Click on any p element to slide down.</h4>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
    <button>Click me to remove multiple event handlers from the above paragraphs.</button>
<script>
    $(document).ready(function(){
      $("li").live("click mouseover", function(){
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("li").die();
      });
    });
</script>
</body>
</html>

Output

After executing the program, it displays a list of items. If the user clicks on or mouseovers over the list of items, the items will slide up and hide. To stop the events from triggering, the user can click on the button to remove the event handlers −

When the user clicks or mouseover on the list items, and later on clicks on the button to remove event handlers −

jquery_ref_events.htm

Print Page