How to do JavaScript to remove multiple input fields dynamically

Question

i am a beginner in JavaScript.i made 3 input fields using bootstrap.i want to enable add/remove these fields dynamically.i did the JavaScript for add more option (photo given below).

But i also want a remove option.I saw many JavaScript/jquery tutorial & many sample snippets to understand both add/remove option,but i am stuck on that.I want to do my 3 input fields like this one (photo given below)

Now here is code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">  
  <form class="form-inline" role="form">
     <div class="form-group" id="parent_div">       
        <div class="row form-group" id="child_div">   
            <label for="day" class="col-xs-2 control-label"></label>
            <div class="col-xs-12 col-lg-3">
               <label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
               <div class="input-group" style="">
                    <select class="form-control " id="employeetype" onchange="updateText('')">
                            <option value="" disabled="" selected=""  >Select Job Type</option> 
                            <option value="10">1</option>
                            <option value="10">2</option>
                            <option value="10">3</option>                           
                    </select> 
                </div>  
            </div>
            <div class="col-xs-12 col-lg-3" >
               <label for="form-input-col-xs-3" class="wb-inv">Date:</label>
               <div class="input-group" >
               <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
               <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
               </div>
            </div>
           <div class="col-xs-12 col-lg-3">
              <label for="form-input-col-xs-4" class="wb-inv">Amount:</label>
              <div class="input-group" >
              <input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" />
              <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>              
              </div>              
           </div> 
        </div>  
    </div>
    <label for="day" class="col-xs-2 control-label"></label>
    <input class="btn btn-success " type="button" id="create_button" value="+" />
  </form>  
</div>

<script>

document.getElementById("create_button").onclick = function (){
var temp = document.getElementById("child_div").outerHTML;
document.getElementById("parent_div").innerHTML = document.getElementById("parent_div").innerHTML + temp;
}

</script>
</body>
</html>

please give me some idea on doing both add/remove option.please let me know for further information.Thanks

Sonaryr · Accepted Answer · 2015-12-08 13:15:38Z

DISCLAIMER: the following snippet can be refined, but it is just to tell you the general idea.

http://jsfiddle.net/Lox5w8ge/1/

First of all id's should be unique, so never duplicate them! I removed the child_div id and made it a class. Since you do include jQuery I decided to use it and use the powers it gives to add some events to the buttons and to select the correct elements.

$('#create_button').click(function() {
    var html = $('.child_div:first').parent().html();
    $(html).insertBefore(this);
});

$(document).on("click", ".deleteButton", function() {
    $(this).closest('.child_div').remove();
});

I first get the html from the first child_div I find and insert it before the button used to add the div.

To remove the child_div again I first added a button to it with a specific class deleteButton with jquery I added a click event that when clicked on this type of button will find the child_div containing this button and then remove it.

Ishtiyaque Ansari · Accepted Answer · 2019-06-28 10:21:09Z

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form class="form-inline" role="form">
            <div class="form-group" id="parent_div">
              <div id="parent_div1"></div>
                <div class="row form-group" id="child_div">
                  <div>
                    <hr>
                    <div class="col-xs-12 col-lg-3">
                        <div class="input-group" style="">
                            <select class="form-control " id="employeetype" onchange="updateText('')">
                                <option value="" disabled="" selected="">Select Job Type</option>
                                <option value="10">1</option>
                                <option value="10">2</option>
                                <option value="10">3</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-1">
                        <input class="btn btn-success " type="button" id="create_button" value="+" />
                    </div>
                </div>
                </div>

            </div>
        </form>
    </div>
    <!-- var -->
    <script>
    var temp = '<div class="row form-group" id="child_div_append"><hr><div class="col-xs-12 col-lg-3"><div class="input-group" style=""><select class="form-control " id="employeetype"><option value="" disabled="" selected=""  >Select Job Type</option><option value="10">1</option><option value="10">2</option><option value="10">3</option> </select></div></div><div class="col-xs-12 col-lg-3" ><div class="input-group" ><input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" /><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div><div class="col-xs-12 col-lg-3"><div class="input-group" ><input type="text" class="form-control" id="form-input-col-xs-4" placeholder=".00" /><span class="input-group-addon"><i class="glyphicon glyphicon-usd">2</i></span></div></div><button  onclick="remove(this)" type="button">Remove</button></div>';
    document.getElementById("create_button").onclick = function() {
         document.getElementById("parent_div1").innerHTML = document.getElementById("parent_div1").innerHTML + temp;
    }
    function remove(e) {
        e.parentNode.remove();
    }
    </script>
</body>

</html>

Could you provide explanation on what you did to solve the problem, also add only the code you changed to the answer (unless you use full code to provide working snippet)

PrakashG · Accepted Answer · 2019-06-28 11:13:40Z

0

By JQuery

var x = 1;
var field ='<div><input type="text" name="field_name[]" value="" /><a href="javascript:void(0);" class="remove_button" title="Add field"><button class=" btn btn-danger" style=" margin:5px;">Remove This</button></a></div>'
$(".add_button").click(function(){
    if(x < 10){
        $(".input_field_wrapper").append(field);
        x++;
    }else{
        alert("max ten field allowed");
    }
});
$(".input_field_wrapper").on("click" ,".remove_button" , function(){
    $(this).parent("div").remove();
        x--;
});

edited Jun 28, 2019 at 11:13

PrakashG

1,6506 gold badges21 silver badges30 bronze badges

answered Jun 28, 2019 at 9:33

Ishtiyaque Ansari

12 bronze badges

Collectives™ on Stack Overflow

How to do JavaScript to remove multiple input fields dynamically

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related