未选中复选框时删除附加div

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，但如果点击Add按钮后，一用户取消选中该复选框，div将被隐藏，但添加的行不会被删除，除非我刷新页面。

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

这是在其他内，我需要删除所有附加项目。我已经尝试了很多的删除方法的变体，但还没有完全去除以前附加的整个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>