Question

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

free()

main()

Answer 1

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

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

如果您要将此div用作删除目的，然后将id="appendex0"块中的ID替换为通用类（例如remove-btn），则将变得很简单，因为它将被多次附加最终您将获得重复的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()的帮助下删除

如何删除附加的``div''jQuery Codeigniter

2 个答案: