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

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

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

非常感谢任何见解。

Answer 1

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

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