Javascript 取消选中复选框时删除附加的div

我有一个表单的一部分，可以在单击按钮时添加新行。我通过使用jqueryappend方法实现了这一点。我还添加了删除单个附加项的代码，但如果未选中特定复选框，我还需要能够删除所有附加项

下面是按钮和输入字段的代码：

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

在else中，我需要删除所有附加项。我尝试了许多remove方法的变体，但还没有完全删除之前附加的整个html片段的每一个部分

---

非常感谢您的任何见解。

向新添加的输入组添加一个类，然后在else处理程序中选择要删除的元素

$function{ var max_fields=10；//允许的最大输入框数 var$wrapper=$.input\u fields\u wrapp；//fields wrapper var$add\u button=$.add\u字段\u button；//添加按钮ID var prefix1='出口[]'； var prefix2='url[]'； $add_button.clickfunction{//在添加输入按钮上单击 变量计数=$wrapper.find'.col-md-12'.length； e、 防止违约； 如果计数”；//添加输入框 }否则{ 警报“最大出口数为10” } }; $wrapper.onclick、.glyphicon、function{//用户单击删除文本 $this.closest'.col-md-12'。删除； $wrapper.find'.col-md-12'.eachfunctioni{ $this.find'input[type=text]：first'.attr{ id:prefix1+'\'+i， 名称：前缀x1+'\'+i }; $this.find'input[type=text]：last'.attr{ id:prefix2+'\'+i， 名称：prefix2+'\'+i }; }; }; }; $'moc3'。更改为； 函数socmedCh{ 如果$'moc3'。是否：选中{ $soc.show； }否则{ $soc.hide； $'.input_fields_wrap.new group'.remove； } } soc{ 显示：无； } 添加

---

下面是来自Arun p Johny的简单代码：

$'moc3'。更改为； 函数socmedCh{ 如果$'moc3'。是否：选中{ $soc.show； }否则{ $soc.hide； $'.input_fields_wrap.new group'.remove； } } soc{ 显示：无； } 添加

---

将css类添加到指定的div中，并将其用作回复的选择器或存储库！最初未选中该复选框。我可以选中该框，然后添加元素，但当我取消选中该框，然后再次选中时，附加的元素仍然存在。我在控制台中也没有任何错误。有什么想法吗？再次谢谢你！我知道我现在错过了什么。好东西！

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