How to remove append 'div' jquery codeigniter

Question

I want to remove the appended item. Please help.

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

Possible duplicate of [How to empty the content of a div](https://stackoverflow.com/questions/5744233/how-to-empty-the-content-of-a-div) — Shahnewaz, Nov 27 '18 at 09:33

Zakaria Acharki · Accepted Answer · 2018-11-27T10:39:59.257

First of all, give your appended block an identifier example class ('my-form-conttainer') like :

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

That will make it simple when you want to target this div for the delete purpose, then replace the id in the block id="appendex0" by common class (e.g remove-btn) since it will be appended multiple time and you will end up with duplicate id's what makes your HTML structure invalid.

Now to delete the appended part you need to attach a click event to the Remove button, go up to the parent div and remove it like :

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

Glad I could help brother. – Zakaria Acharki Nov 29 '18 at 07:36 — Zakaria Acharki, Nov 29 '18 at 07:36

score 0 · Answer 2 · answered Nov 27 '18 at 09:33

0

I think you can remove with help of $(".divcls0").remove()

answered Nov 27 '18 at 09:33

bimal sharma

170
8

How to remove append 'div' jquery codeigniter

2 Answers2