jQuery die() Method

Last Updated : 11 Jan, 2024

jQuery die() method added with the live() method, removes one or more event handlers, for selected elements.

Syntax:

$(selector).die(event, function)

Parameters:

event: Specifies one or more than one event handlers to remove. Multiple valid event values are separated by space.
function: It is used to specify a function to be removed.

Example 1:

html

<!DOCTYPE html> 
<html> 

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> 
    </script> 
    <script> 
        function changeSize() { 
            $(this).animate({ 
                fontSize: "+=3px" 
            }); 
        } 

        function changeSpacing() { 
            $(this).animate({ 
                letterSpacing: "+=2px" 
            }); 
        } 

        $(document).ready(function() { 
            $("p").live("click", changeSize); 
            $("p").live("click", changeSpacing); 
            $("button").click(function() { 
                $("p").die("click", changeSize); 
            }); 
        }); 
    </script> 
</head> 

<body> 

    <center> 
        <p style="color:green;"> 
            Geeks for geeks. 
        </p> 
        <button> 
        added with the live() method, 
        Remove the event handler changeSize(), 
        for p elements 
    </button> 
    </center> 
</body> 

</html>

Output:

Before clicking on the paragraph:

After clicking on the paragraph:

Example-2:

html

<!DOCTYPE html> 
<html> 

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> 
    </script> 
    <script> 
        function changeSize() { 
            $(this).animate({ 
                fontSize: "+=3px" 
            }); 
        } 

        function changeSpacing() { 
            $(this).animate({ 
                letterSpacing: "+=2px" 
            }); 
        } 

        $(document).ready(function() { 
            $("h1").live("click", changeSize); 
            $("h1").live("click", changeSpacing); 
            $("button").click(function() { 
                $("h1").die("click", changeSize); 
            }); 
        }); 
    </script> 
</head> 

<body> 
    <div> 
        <center> 
            <h1>welcome to GFG</h1> 
    </center> 
    </div> 

    <center> 
        <button>click here</button> 
    </center> 
</body> 

</html>