Lane Lane - 7 months ago 18
Javascript Question

Remove appended divs when checkbox is unchecked

I have a portion of a form that can add new rows when a button is clicked. I accomplished this by using the jQuery append method. I have also added code to remove an individual appended item, but I also need to be able to remove all appended items if a specific checkbox is unchecked.

below is the code I have for the button and 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>&nbsp;</p>'); //add input box
} else {
alert('Maximum # of outlets is 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 a function to show and hide the div that this code is displayed in, but if after clicking the add button, a user un-checks the checkbox, the div is hidden, but the added rows are not removed unless I refresh the page.

function socmedCh() {
if ($('#moc3').is(":checked")) {
$("#soc").show();
} else {
$("#soc").hide();
}


}

It's within the else that I need to remove all the appended items. I have tried many variations of the remove method, but haven't quite gotten it to fully remove every bit of the entire segment of html that was previously appended.

Any insight is greatly appreciated.

Answer

Add a class to the newly added input groups then in the else handler select those elements are 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>&nbsp;</p>'); //add input box
    } else {
      alert('Maximum # of outlets is 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 + '_' + i
      });
      $(this).find('input[type="text"]:last').attr({
        "id": prefix2 + '_' + i,
        "name": prefix2 + '_' + i
      });
    });
  });
});

$('#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