One-Click Input Clearing with jQuery - Clearable Input

ClearableInput is a tiny jQuery plugin that automatically adds a CLEAR button to the text fields you specify. This can help your users quickly erase the content they entered with a single click.

The plugin works well for both individual input fields and multiple related text fields. For example, if you have fields for a customer's name, ID, and address, you can set up the plugin to clear all three with a single click. 

How to use it:

1. Add jQuery library and ClearableInput plugin's files to your webpage.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery ClearableInput Plugin -->
<script src="jquery.clearableinput.js"></script>
<link href="clearableinput.css" rel="stylesheet" />

2. Select the input fields you want to make clearable and call the .clearableInput() function.

$(function(){ 
  $('.myInput').clearableInput();
});

3. The plugin also lets you clear multiple related text fields at once. You can group those inputs using the data-clrgrp attribute in your HTML:

<input id="username" type="text" class="clearable-input" data-clrgrp="myGroup" />
<input id="email" type="email" data-clrgrp="myGroup" />
<textarea id="message" data-clrgrp="myGroup"></textarea>

4. Alternatively, you can specify which fields to clear using the clear_items option during init:

$('#username').clearableInput({
  clear_items: ['username', 'email','message']
});

How it works:

The Clearable Input Plugin works by extending jQuery’s functionality. It first sets up default options, including the CSS selector for input fields (input.clearable-input) and an array to store IDs of items to be cleared (clear_items). You can override these defaults when you initialize the plugin.

The plugin wraps each target input field with a <span> element that has the class clearable-span. This span acts as a container. Then, it adds a <div> element with the class clearable-icon right after the input field. This div contains the "X" icon that users click to clear the input.

The plugin monitors the input field for changes. If the input field contains text, it makes the clear icon visible. If the input field is empty, it hides the clear icon.

When a user clicks the clear icon, the plugin first clears the main input field it's attached to. If you specified elements to clear using the clear_items option, the plugin loops through those IDs and clears each corresponding element. If you didn’t use the clear_items option but the input field has a data-clrgrp attribute, the plugin looks for other elements with the same data-clrgrp value and clears them as well. Finally, it updates the visibility of the clear icon, hiding it since the input field is now empty.

---

This awesome jQuery plugin is developed by nalindaDJ. For more Advanced Usages, please check the demo page or visit the official website.