javascript - Remove appended divs when checkbox is unchecked -
i have portion of form can add new rows when button clicked. accomplished using jquery append method. have added code remove individual appended item, need able remove appended items if specific checkbox unchecked.
below code have button , input fields:
$(function() { var max_fields = 10; //maximum input boxes allowed var $wrapper = $(".input_fields_wrap"); //fields wrapper var $add_button = $(".add_field_button"); //add button id var prefix1 = 'outlet[]'; var prefix2 = 'url[]'; $add_button.click(function(e) { //on add input button click var count = $wrapper.find('.col-md-12').length; e.preventdefault(); if (count < max_fields) { //max input box allowed $wrapper.append('<div class="col-md-12">\ <div class="row">\ <div class="form-group">\ <div class="col-md-6">\ <input type="text" class="form-control" placeholder="outlet" name="'+prefix1+'_'+count+'" id="'+prefix1+'_'+count+'" value=""/>\ </div>\ <div class="col-md-6">\ <div class="input-group">\ <input type="text" class="form-control" placeholder="url" name="'+prefix2+'_'+count+'" id="'+prefix2+'_'+count+'" value=""/><span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>\ </div>\ </div>\ </div>\ </div>\ <p> </p>'); //add input box } else { alert('maximum # of outlets 10') } }); $wrapper.on("click",".glyphicon", function(e) { //user click on remove text $(this).parents('.col-md-12').remove(); $wrapper.find('.col-md-12').each(function(i) { $(this).find('input[type="text"]:first').attr({"id": prefix1+'_'+i, "name":prefix1+'_'+i}); $(this).find('input[type="text"]:last').attr({"id": prefix2+'_'+i, "name":prefix2+'_'+i}); }); }); }); i have function show , hide div code displayed in, if after clicking add button, user un-checks checkbox, div hidden, added rows not removed unless refresh page.
function socmedch() { if ($('#moc3').is(":checked")) { $("#soc").show(); } else { $("#soc").hide(); } } it's within else need remove appended items. have tried many variations of remove method, haven't quite gotten remove every bit of entire segment of html appended.
any insight appreciated.
add class newly added input groups in else handler select elements remove them
$(function() { var max_fields = 10; //maximum input boxes allowed var $wrapper = $(".input_fields_wrap"); //fields wrapper var $add_button = $(".add_field_button"); //add button id var prefix1 = 'outlet[]'; var prefix2 = 'url[]'; $add_button.click(function(e) { //on add input button click var count = $wrapper.find('.col-md-12').length; e.preventdefault(); if (count < max_fields) { //max input box allowed $wrapper.append('<div class="col-md-12 new-group">\ <div class="row">\ <div class="form-group">\ <div class="col-md-6">\ <input type="text" class="form-control" placeholder="outlet" name="' + prefix1 + '_' + count + '" id="' + prefix1 + '_' + count + '" value=""/>\ </div>\ <div class="col-md-6">\ <div class="input-group">\ <input type="text" class="form-control" placeholder="url" name="' + prefix2 + '_' + count + '" id="' + prefix2 + '_' + count + '" value=""/><span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>\ </div>\ </div>\ </div>\ </div>\ <p> </p>'); //add input box } else { alert('maximum # of outlets 10') } }); $wrapper.on("click", ".glyphicon", function(e) { //user click on remove text $(this).closest('.col-md-12').remove(); $wrapper.find('.col-md-12').each(function(i) { $(this).find('input[type="text"]:first').attr({ "id": prefix1 + '_' + i, "name": prefix1 + '_' + }); $(this).find('input[type="text"]:last').attr({ "id": prefix2 + '_' + i, "name": prefix2 + '_' + }); }); }); }); $('#moc3').change(socmedch); function socmedch() { if ($('#moc3').is(":checked")) { $("#soc").show(); } else { $("#soc").hide(); $('.input_fields_wrap .new-group').remove(); } }#soc { display: none; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="moc3" type="checkbox" /> <div id="soc"> <button class="add_field_button">add</button> <div class="input_fields_wrap"></div> </div>
Comments
Post a Comment