如何删除附加'div' jquery codeigniter

Question

我想删除附加的项目。请帮忙。

$(document).ready(function() {
  $("#appendex0").click(function() {
    $(".divcls0").append('<div class="col-sm-10 col-sm-offset-1"><div class="col-sm-3 col-sm-offset-1"><div class="form-group"><div class="nk-int-st"><label style="font-size:12px;">Work Place<small>(required)</small></label><input name="add" type="text" class="form-control" placeholder="ABC Privet Limited"></div></div></div><div class="col-sm-2 col-sm-offset-1"><div class="form-group nk-datapk-ctm form-elet-mg" id="data_1"><label style="font-size:12px;">Join Date <small>(required)</small></label><div class="input-group date nk-int-st"><span class="input-group-addon"></span><input type="text" class="form-control" ></div></div></div><div class="col-sm-2 col-sm-offset-1"><div class="form-group nk-datapk-ctm form-elet-mg" id="data_1"><label style="font-size:12px;">Resign Date <small>(required)</small></label><div class="input-group date nk-int-st"><span class="input-group-addon"></span><input type="text" class="form-control" ></div></div></div><div class="col-sm-1 col-sm-offset-1"><div class="button-icon-btn button-icon-btn-cl sm-res-mg-t-30"><label>Remove</label><button  style="color:white;" id="appendex0" class="btn btn notika-btn-teal deeporange-icon-notika btn-reco-mg btn-button-mg btn-xs"><i class="notika-icon notika-minus-symbol"></i></button</div></div></div></div>');
    event.preventDefault();
  });
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-icon-btn button-icon-btn-cl sm-res-mg-t-30">
  <label>New</label>
  <button id="appendex0" style="color:white;" class="btn btn notika-btn-teal deeporange-icon-notika btn-reco-mg btn-button-mg btn-xs"><i class="notika-icon notika-plus-symbol"></i></button>
</div>

Answer 1

首先，给附加块一个标识符示例类（'my-form-conttainer'），例如：

<div class="my-form-conttainer col-sm-10 col-sm-offset-1">

当您想将此 div 用于删除目的时，这将变得很简单，然后用公共类（例如 remove-btn）替换块 id="appendex0" 中的 id，因为它将被多次附加并且您将结束加上重复的 id 会导致您的 HTML 结构无效。

现在要删除附加的部分，您需要将点击事件附加到 Remove 按钮，转到父 div 并将其删除，如下所示：

$('.divcls0').on('click', '.remove-btn', function() {
    $(this).closest('.my-form-conttainer').remove();
});

$(document).ready(function() {
  $("#appendex0").click(function(e) {
    e.preventDefault();

    $(".divcls0").append('<div class="my-form-conttainer col-sm-10 col-sm-offset-1"><div class="col-sm-3 col-sm-offset-1"><div class="form-group"><div class="nk-int-st"><label style="font-size:12px;">Work Place<small>(required)</small></label><input name="add" type="text" class="form-control" placeholder="ABC Privet Limited"></div></div></div><div class="col-sm-2 col-sm-offset-1"><div class="form-group nk-datapk-ctm form-elet-mg" id="data_1"><label style="font-size:12px;">Join Date <small>(required)</small></label><div class="input-group date nk-int-st"><span class="input-group-addon"></span><input type="text" class="form-control" ></div></div></div><div class="col-sm-2 col-sm-offset-1"><div class="form-group nk-datapk-ctm form-elet-mg" id="data_1"><label style="font-size:12px;">Resign Date <small>(required)</small></label><div class="input-group date nk-int-st"><span class="input-group-addon"></span><input type="text" class="form-control" ></div></div></div><div class="col-sm-1 col-sm-offset-1"><div class="button-icon-btn button-icon-btn-cl sm-res-mg-t-30"><label>Remove</label><button class="btn btn notika-btn-teal deeporange-icon-notika btn-reco-mg btn-button-mg btn-xs remove-btn"><i class="notika-icon notika-minus-symbol"></i>Remove</button</div></div></div></div>');
  });

  $('.divcls0').on('click', '.remove-btn', function() {
    $(this).closest('.my-form-conttainer').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-icon-btn button-icon-btn-cl sm-res-mg-t-30">
  <label>New</label>
  <button id="appendex0" class="btn btn notika-btn-teal deeporange-icon-notika btn-reco-mg btn-button-mg btn-xs"><i class="notika-icon notika-plus-symbol"></i>Append</button>
</div>

<div class="divcls0"></div>

Answer 2

我认为您可以在 $(".divcls0").remove() 的帮助下删除