Как удалить добавление '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 для удаления.Затем замените идентификатор в блоке id="appendex0" на общий класс (например, remove-btn), так как он будет добавлен несколько раз, и в результате вы получите дубликаты идентификаторов, что делает вашу HTML-структуру недействительной.

Теперьчтобы удалить добавленную часть, вам нужно прикрепить событие click к кнопке 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()