emojiPicker('destroy')

Author: zpnk

README.md

@@ -82,7 +82,7 @@ The color of the smiley image that appears on the picker button. Acceptable valu
 The background color of the picker button. Any hex value is acceptable. Defaults to '#eee' if no iconBackgroundColor is specified.
 
 ### recentCount (int) ###
-The number of emojis that should show in the 'Recently Used' section. Defaults to 36 if no recentCount is specified. 
+The number of emojis that should show in the 'Recently Used' section. Defaults to 36 if no recentCount is specified.
 
 Note: 'Recently Used' will only show for the user if their browser supports HTML5 Local Storage.
 
@@ -121,6 +121,18 @@ $('#question').emojiPicker('toggle');
 
 You can see an example of this in the [demo](http://wedgies.github.io/jquery-emoji-picker/demo.html).
 
+## Destroying the Emoji Picker ##
+
+To remove the the emoji picker html and event listeners, simply call the emoji picker function with the `destroy` option:
+
+```javascript
+$('#question').emojiPicker('destroy');
+```
+
+An example of this can be found in the [demo](http://wedgies.github.io/jquery-emoji-picker/demo.html).
+
+
+
 ## Notes ##
 
 jQuery Emoji Picker is disabled for mobile devices, which already support the emoji keyboard.

demo.html

@@ -13,12 +13,6 @@
   <script type="text/javascript">
     $(document).ready(function(e) {
 
-      $('#text-custom-trigger').emojiPicker({
-        width: '300px',
-        height: '200px',
-        button: false
-      });
-      
       $('#input-default').emojiPicker();
 
       $('#input-custom-size').emojiPicker({
@@ -30,12 +24,26 @@
         position: 'left'
       });
 
-      $('#trigger').click(function(e) {
+      $('#create').click(function(e) {
+        e.preventDefault();
+        $('#text-custom-trigger').emojiPicker({
+          width: '300px',
+          height: '200px',
+          button: false
+        });
+      });
+
+      $('#toggle').click(function(e) {
         e.preventDefault();
         $('#text-custom-trigger').emojiPicker('toggle');
       });
 
-      // keyup event is fired 
+      $('#destroy').click(function(e) {
+        e.preventDefault();
+        $('#text-custom-trigger').emojiPicker('destroy');
+      })
+
+      // keyup event is fired
       $(".emojiable-question, .emojiable-option").on("keyup", function () {
         //console.log("emoji added, input val() is: " + $(this).val());
       });
@@ -58,7 +66,11 @@
   <!-- &#x1F335; -->
   <form>
 
-    <button id="trigger">Custom emoji trigger</button>
+    <button id="create">create</button>
+
+    <button id="toggle">toggle</button>
+
+    <button id="destroy">destroy</button>
 
     <div class="field">
       <textarea id="text-custom-trigger" class="emojiable-question" placeholder="Your Question"></textarea>

js/jquery.emojipicker.js

@@ -127,6 +127,17 @@
 
     },
 
+    destroyPicker: function() {
+      this.$picker.unbind('mouseover');
+      this.$picker.unbind('mouseout');
+      this.$picker.unbind('click');
+      this.$picker.remove();
+
+      $.removeData(this.$el.get(0), 'emojiPicker');
+
+      return this;
+    },
+
     listen: function() {
       // If the button is being used, wrapper has not been set,
       //    and will not need a listener
@@ -392,7 +403,10 @@
         switch(options) {
           case 'toggle':
             plugin.iconClicked();
-          break;
+            break;
+          case 'destroy':
+            plugin.destroyPicker();
+            break;
         }
       });
       return this;