Plugin Destroy / Cleanup

Destroy Method

A good plugin provides a destroy method that removes event listeners, cleans up DOM changes, and removes the data cache entry.

Example

$.fn.tooltip = function(method) {
  const methods = {
    init() {
      this.on("mouseenter.tooltip", showTip)
          .on("mouseleave.tooltip", hideTip);
    },
    destroy() {
      this.off(".tooltip")      // remove namespaced events
          .removeData("tooltip") // clear plugin data
          .find(".tip").remove(); // remove injected DOM
    }
  };
  return methods[method]
    ? methods[method].call(this)
    : methods.init.call(this);
};

JAVASCRIPT

Full Editor

Pro Tip

Use event namespaces (.tooltip) so you can remove only your plugin's events with .off(".tooltip").

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned