Clear input values inside DIV JavaScript and jQuery

javascript jquery

← PrevNext →

Tools you can use

Here’s a quick tip for beginners. Let’s assume, you have a web page or a form that has many input fields such as, textbox, buttons, password, checkboxes etc, and you want to clear the values of all the fields. Here, I am sharing two different examples on how to clear input field values inside a DIV element using JavaScript and jQuery.

Clear Input Fields inside DIV using JavaScript

The <input> element in HTML allows users to input data. It’s one of the most important elements and has many different types. In the examples here has many input elements with different types and I’ll show you how to clear all the fields with the click of a button.

The Markup
<html>
<head>
    <title>Clear Input Fields inside DIV using JavaScript</title>
</head>
<body>
    <div id="mainContainer">
        <p><input type="button" id="b" value="Button" /></p>
        <p><input type="text" id="tb" value="" placeholder="textbox field" /></p>
        <p><input type="submit" id="tbSub" /></p>
        <p><input type="password" id="pass" value="" placeholder="password" /></p>
        <p><input type="file" id="file" /></p>
        <p><input type="email" id="email" placeholder="email" /></p>
        <p><input type="date" id="dt" /></p>
        <p><input type="number" id="no" placeholder="number field" /></p>
        <p><input type="checkbox" id="chk" checked /></p>
        <p><input type="radio" id="radio" checked /></p>
    </div>
    
    <p>
        <input type="button" id="btClear" value="Clear All" 
            onclick="clearInputFields('mainContainer')" />
    </p>
</body>

<script>
    function clearInputFields(divElement) {
        var ele = document.getElementById(divElement);

        // IT WILL READ ALL THE ELEMENTS. <p>, <div>, <input> ETC.
        for (i = 0; i < ele.childNodes.length; i++) {

            // SINCE THE <input> FIELDS ARE INSIDE A <p> TAG, 
            // I'LL USE THE "firstChild" PROPERTY TO GET THE <input> TAG.
            var child = ele.childNodes[i].firstChild;
            //console.log(child);

            // CHECK IF CHILD NOT NULL.
            // THIS IS IMPORTANT AS IT WILL RETURN A TEXT FOR EVERY "Whitespace".
            // 'Whitespace' IS A TEXT OR NODE BETWEEN <div> AND <p> AND AFTER <p>.
            if (child) {
                switch (child.type) {
                    case 'button':
                    case 'text':
                    case 'submit':
                    case 'password':
                    case 'file':
                    case 'email':
                    case 'date':
                    case 'number':
                        child.value = '';
                    case 'checkbox':
                    case 'radio':
                        child.checked = false;
                }
            }
        }
    }
</script>
</html>
Try it

I have a function that has the procedures to clear the input fields. I’ll call the function using the onclick property of the button. First, I’ll create an object of the parent container or the <div> element in this case. Then I’ll loop through each element inside the <div> using the childNodes property.

Since I have defined the <input> elements inside a <p> element, the childNodes property will return the p’s first. Therefore, I am using firstChild property to get the <input> elements.

var child = ele.childNodes[i].firstChild;

Read more about firstChild here.

Finally, check the type of each input element and accordingly clear the values it. For types checkbox and radio, the value is false.

Clear Input Fields inside DIV using jQuery

For the jQuery method, I using all the <input> types that I have defined in the above example using JavaScript. The important function is inside the <script> tag. Don’t forget to add jQuery library (CDN) inside the <head> tag.

The Markup

The markup remains the same as defined in the above example. However, you’ll need to first add the jQuery library.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <div id="mainContainer">
        <p><input type="button" id="b" value="Button" /></p>
        <p><input type="text" id="tb" value="" placeholder="textbox field" /></p>
        <p><input type="submit" id="tbSub" /></p>
        <p><input type="password" id="pass" value="" placeholder="password" /></p>
        <p><input type="file" id="file" /></p>
        <p><input type="email" id="email" placeholder="email" /></p>
        <p><input type="date" id="dt" /></p>
        <p><input type="number" id="no" placeholder="number field" /></p>
        <p><input type="checkbox" id="chk" checked /></p>
        <p><input type="radio" id="radio" checked /></p>
    </div>
    <p><input type="button" id="btClearAll" value="Clear All" /></p>
</body>

<script>
    $(document).ready(function () {
        $('#btClearAll').click(function () {

            $('#mainContainer').find(':input').each(function () {
                switch (this.type) {
                    case 'button':
                    case 'text':
                    case 'submit':
                    case 'password':
                    case 'file':
                    case 'email':
                    case 'date':
                    case 'number':
                        $(this).val('');
                        break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                        break;
                }
            });
        });
    });
</script>
</html>
Try it

Here, I am using jQuery .find() method to search for <input> elements inside the <div>. The .each() method will loop through each element and check its type. If it’s a match, clear the values.

🙂

← PreviousNext →