Удалить добавленные divs при снятой галочке

Question

У меня есть часть формы, которая может добавлять новые строки при нажатии кнопки. Я выполнил это с помощью метода jQuery append. Я также добавил код для удаления отдельного добавленного элемента, но мне также нужно иметь возможность удалять все добавленные элементы, если конкретный флажок не установлен.

ниже код у меня есть для кнопок и полей ввода:

$(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}); 
    }); 
    }); 
}); 

У меня есть функция, чтобы показать и скрыть DIV, который отображается в этот код, но если после нажатия на кнопку добавления, пользователь отменяет флажок, div скрыт, но добавленные строки не удаляются, если я не обновляю страницу.

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

Именно в этом случае мне нужно удалить все прилагаемые элементы. Я пробовал много вариантов метода remove, но не смог полностью удалить каждый бит всего сегмента html, который был ранее добавлен.

Любое понимание очень ценится.

Answer 1

Добавьте класс вновь добавленных входных групп, то в обработчике еще выбрать те элементы, удалите их

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