How to destroy a button in jQuery UI ? - GeeksforGeeks

31 Dec, 2020
To destroy a button in jQuery UI we will be using destroy() method which is discussed below:
jQuery UI destroy() Method is used to remove the complete functionality of the button. It returns the button element completely to its initial state.
Syntax:
$(".selector").button("destroy")
Parameters: This method does not accept any parameters.
Return values: This method simply returns the button to its pre-initial state.
Links for jQuery UI libraries:
<link rel=’stylesheet’href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css”><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”> </script><script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”> </script>
OR
<link rel=’stylesheet’href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”><script src=”https://code.jquery.com/jquery-1.10.2.js”> </script><script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”> </script>
Below are the example which shows the implementation of this method.
Example 1:
HTML
<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content=         "width=device-width, initial-scale=1">       <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">     </script>       <script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">     </script>       <link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"        rel="stylesheet" type="text/css" />               <style>         .height {             height: 10px;         }     </style>       <script>         $(function () {             $("#buttonId, #submitId, #anchorId").button();              $('#buttonId, #submitId, #anchorId')                .click(function (event) {                   event.preventDefault();                 $(this).button("destroy");             });         });     </script> </head>   <body>     <h1 style="color:green">GeeksforGeeks</h1>     <b>jQueryUI | Button destroy Method</b>     <div class="height"> </div><br>     <div class="buttons-div">         <button id="buttonId">Button element</button>         <input id="submitId" type="submit"            value="Submit button">         <a id="anchorId" href="">Anchor</a>     </div></body>   </html>
Output:
Example 2:
HTML
<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content=         "width=device-width, initial-scale=1">        <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">     </script>       <script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">     </script>       <link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"        rel="stylesheet" type="text/css" />               <style>         .height {             height: 10px;         }     </style>       <script>         $(function () {             $("#buttonId").button();              $('#buttonId').click(function (event) {                 event.preventDefault();                 $(this).button("destroy");                 console.log("The button is destroyed succesfully")            });         });     </script> </head>   <body>     <h1 style="color:green">GeeksforGeeks</h1>     <b>jQueryUI | Button destroy Method</b>     <div class="height"> </div><br>     <button id="buttonId">Button element</button> </body>   </html>
Output:
Reference: https://api.jqueryui.com/button/
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
jQuery-UI
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?