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

【问题标题】：Remove appended divs when checkbox is unchecked取消选中复选框时删除附加的 div
【发布时间】：2016-04-19 03:38:45
【问题描述】：

我有一部分表单可以在单击按钮时添加新行。我通过使用 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 片段的每一位。

非常感谢任何见解。

【问题讨论】：

将 css 类添加到附加的 div 中并将其用作您的选择器

标签： javascript jquery html checkbox

【解决方案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>

【讨论】：

感谢您的回复！该复选框最初未选中。我可以选中该框，然后添加元素，但是当我取消选中该框然后再次选中它时，附加的元素仍然存在。我在控制台中也没有任何错误。有什么想法吗？
非常感谢！我明白我现在缺少什么了。好东西！

【解决方案2】：

这里是来自 Arun P Johny 的简单代码：

$('#moc3').change(socmedCh);

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

#soc {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

https://jsfiddle.net/m461cweo/

【讨论】：