1

i can add a div content using on-click and can generate it multiple or more but i also want to remove that generated div when a user click remove button. I have tried some but it only remove once. If i generated one on-click then it removed when i click remove but when i generated two or more it does not work. 

$(document).ready(function() {
       
        $("button[name='addDom']").click(function() {
            
            var domElement = $('<div class="row " id="removechild"><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button onclick="clearBox()" class="btn btn-danger">Remove Child</button><hr>');
            $(this).after(domElement);
        });
    
});

 function clearBox(removechild)
    {
        document.getElementById('removechild').innerHTML = "";
    }
    $("#removechild").html("");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="addDom" class="btn btn-warning"> Add Child</button>
look over snippet !!! how to get rid of that and any alternative solution for that ... Thanks in advance
Md Ashiqur Rahman
  • 454
  • 1
  • 5
  • 19
  • 2
    ID should be unique.. use class instead then use that class to remove the added elements – guradio May 04 '17 at 09:42
  • Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Douwe de Haan May 04 '17 at 09:43
  • @guradio I think the premise is that there's a button within each element which deletes the element itself. In this case the ID will be required to be unique, as you said, and the element should be emptied based on this ID. Using the class would clear all items which I don't think it the goal. – Kallum Tanton May 04 '17 at 09:45
  • I'd suggest you look in to using a templating library as that is an absolute ton of HTML to be including in the JS code. – Rory McCrossan May 04 '17 at 09:48
  • @DouwedeHaan its not a duplicate ,, – Md Ashiqur Rahman May 04 '17 at 15:10

7 Answers7

2
  • Wrap your entire "section" in a div with a class (child).
  • Removed the id "removeChild" from a div since you shouldn't have more than 1 id with that value.
  • Removed your inlined onclick event and replaced with one event that removes the section closest to the button you clicked.
  • Added a class (removeChild) to the remove button so we can easily set up the click event using that class.

$(document).ready(function() {
       
        $("button[name='addDom']").click(function() {
            
            var domElement = $('<div class="child"><div class="row "><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button class="removeChild" class="btn btn-danger">Remove Child</button><hr></div>');
       
       $(this).after(domElement);
        });
       $(document).on('click','button.removeChild',function(){
         $(this).closest('div.child').remove();
       });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="addDom" class="btn btn-warning"> Add Child</button>
Robert McKee
  • 21,305
  • 1
  • 43
  • 57
  • there a problem occurs that is only one input fields values passed but not entered into database . not all the input values are passed ?? how to solve that – Md Ashiqur Rahman May 04 '17 at 15:17
  • 1
    Change name of the input fields by appending a number to them before adding it to the dom. As for how to save it to the database, well that depends on what you are using on the server side. – Robert McKee May 04 '17 at 17:11
1

Inside your addDom click add this code

   var domElement = $('<div class="child"><div class="row "><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button class="removeChild" class="btn btn-danger">Remove Child</button><hr></div>');
$(this).after(domElement);

And outside that paste this

$(document).on('click','button.removeChild',function(){
     $(this).closest('div.child').hide();
 });

It will work!

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
1

Try this:

$('addBtn').click(function(){
    var $div = $('<div class="test">...</div>');
    $(this).after($div);
})

$('.removeBtn').click(function(){
    var $div = $('.test').last();
    $div.length && $div.remove();
})
Pang
  • 9,564
  • 146
  • 81
  • 122
喝茶的螃蟹
  • 134
  • 6
1

You should wrap your form into a div then delete the div like this:

var id = 0;
$(document).ready(function() {
       
        $("button[name='addDom']").click(function() {
            
            var domElement = $('<div class="rowItem"><div class="row" id="removechild"><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button onclick="clearBox(this)" class="btn btn-danger">Remove Child</button><hr></div>');
            $(this).after(domElement);
        });
    
});

 function clearBox(removeChild)
    {
        $(removeChild).parentsUntil('.rowItem').html('');
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="addDom" class="btn btn-warning"> Add Child</button>

I am using jQuery's parentsUntil to get the wrapping div and delete all item inside the div.

Vinsensius Danny
  • 64
  • 5
  • thanks for looking my problem its fixed by solution of @Robert – Md Ashiqur Rahman May 04 '17 at 10:17
  • there a problem occurs that is only one input fields values passed but not entered into database . not all the input values are passed ?? how to solve that @VinsensiusDanny – Md Ashiqur Rahman May 04 '17 at 15:20
  • You should make the name of each input form elements to array. e.g. `` into `` In serverside, you should make loop to read the array like this [answer](http://stackoverflow.com/a/6072525/7329585) – Vinsensius Danny May 04 '17 at 15:37
  • Hello @Vinsensius This answer helped me. Now I got new issue can you please help me? I want to append div based on input filed data for example if any user enter 5 in input field i want to append 5 div, i tried some but i am using a wizard form i can not set e.preventDefault :( – Md Ashiqur Rahman Nov 06 '17 at 20:11
1

You need to assign a unique ID then provide this unique ID in the clearBox function.

$(document).ready(function() {
    var count = 0;

    $("button[name='addDom']").click(function() {
        var uniqueID = "removechild-" + count,
            html = '<div class="row" id="' + uniqueID + '">row of stuff<button onclick="clearBox(\'' + uniqueID + '\')" class="btn btn-danger">Remove Child</button></div>';

        $(this).after(html);

        count++;
    });
});

function clearBox(idToRemove) {
    document.getElementById(idToRemove).innerHTML = "";
}

CodePen example: https://codepen.io/JoeHastings/pen/dWzwMB

HastingsDirect
  • 628
  • 1
  • 9
  • 17
  • Hello @Joe This answer helped me. Now I got new issue can you please help me? I want to append div based on input filed data for example if any user enter 5 in input field i want to append 5 div, i tried some but i am using a wizard form i can not set e.preventDefault :( – Md Ashiqur Rahman Nov 06 '17 at 20:10
  • Do you mean you want to append a div with an ID of 5 or you want to append 5 separate div's? also what do you mean by your using a wizard form? What your asking certainly sounds possible - if you had a codepen/jsfiddle of your issue it may be easier to help – HastingsDirect Nov 08 '17 at 09:58
0

As mentionned by myself and @guradio in the comments your ID should be unique. The easiest way to do this would be to have a global integer variable which is appending to each elements ID and then incremented:

var elemIndex = 0;
createElement(){
    var newId = "someElement" + elemIndex;
    var domElement = '<div id="'+ newId +'"'>...</div>';
}

Your delete button click should then call the clearBox method, padding the unique ID (looks like your method has started to support this with the parameter):

clearBox(elementId){
    document.getElementById(elementId).innerHtml = "";
}

And the button (as it would appear when building the element string):

var domElement = '...<button type="button" onclick="clearBox('+ newId +')">Clear</button>...';
Kallum Tanton
  • 802
  • 7
  • 22
0

You can achieve this by using Jquery Traversing. Corresponsing parent div can be removed on click of the remove Button. Refer this Jsfiddle Link.

$(document).on( "click", ".removeBtn", function() {
  $(this).parent().parent().parent().remove();
});

Fiddle

web developer
  • 457
  • 2
  • 10
  • 25