Dynamically Add / Remove Fields - Remove Button not removing Fields

Question

I have created Dynamically Add / Remove Fields. The Add button is working perfectly. But when I click the remove button, it only removes the button and not the fields. Following is my code... Plz help... Thanks...

<div class="panel panel-default">

  <div class="panel-heading"><center><b>Allocation of Funds</b></center></div>

  <div class="panel-body">

<div class="row"><div class="col-md-5"><label for="exampleInputPassword1">Allocation Items</label></div><div class="col-md-5"><label for="exampleInputPassword1">Amount</label></div><div class="col-md-2"></div></div><div class="row"><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-2"><button type="button" class="btn btn-success" id="add-allocation-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></div></div>

<div id="fund-allocation-fields">

</div>

  </div>

</div>

<script type="text/javascript">

  jQuery(document).ready(function( $ ){

    //fadeout selected item and remove
    $(document).on('click', '#remove-allocation-fields', function(event) {
      event.preventDefault();
        $(this).parent().fadeOut(300, function(){ 
            $(this).empty();
            return false;
        });
    });

    var rows = '<div class="custom-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div></div><div class="clear"></div></div>';

    //add input
    $('#add-allocation-fields').click(function() {
        $(rows).fadeIn("slow").appendTo('#fund-allocation-fields'); 
        i++;    
        return false;
    });

  });

</script>

Please share the HTML where `remove-allocation-fields` is present. — Ele, Feb 03 '18 at 15:14

score 2 · Answer 1 · answered Feb 03 '18 at 15:16

Instead of $(this).empty() you need to do $(this).parent().empty()

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">

  <div class="panel-heading">
    <center><b>Allocation of Funds</b></center>
  </div>

  <div class="panel-body">

    <div class="row">
      <div class="col-md-5"><label for="exampleInputPassword1">Allocation Items</label></div>
      <div class="col-md-5"><label for="exampleInputPassword1">Amount</label></div>
      <div class="col-md-2"></div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div>
      </div>
      <div class="col-md-5">
        <div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div>
      </div>
      <div class="col-md-2"><button type="button" class="btn btn-success" id="add-allocation-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></div>
    </div>

    <div id="fund-allocation-fields">

    </div>

  </div>

</div>

<script type="text/javascript">
  var i = 0;
  jQuery(document).ready(function($) {

    //fadeout selected item and remove
    $(document).on('click', '#remove-allocation-fields', function(event) {
      event.preventDefault();
      $(this).parent().fadeOut(300, function() {
        $(this).parent().empty();
        return false;
      });
    });

    var rows = '<div class="custom-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-5"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div></div><div class="clear"></div></div>';

    //add input
    $('#add-allocation-fields').click(function() {
      $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
      i++;
      return false;
    });

  });
</script>

Don't use `.parent()` JS should not broke if we change HTML – Roko C. Buljan Feb 03 '18 at 15:18 — Roko C. Buljan, Feb 03 '18 at 15:18
@shawon191 Thanks Shawon Working perfectly... :) – Minesh Feb 03 '18 at 15:24 — Minesh, Feb 03 '18 at 15:24

score 1 · Accepted Answer · answered Feb 03 '18 at 15:26

Elements in the fields template you're cloning should now have ID. Remember that a document should not have duplicate IDs?
Use .closest(".custom-fields") when removing the button's .custom-field element wrapper.
Remove i++
Instead of delegating clicks down far to document use a static nearest wrapper $(".panel").on('click', '.js-remove', f...
No need to return false; in your case. Event.preventDefault() is good enough (if even needed since you don't have any <form> element and you're using type="button" buttons.)

var field = `
<div class="custom-fields">
  <div class="row">
    <div class="col-md-5">
      <div class="form-group"><input type="email" class="form-control" placeholder="Email"></div>
    </div>
    <div class="col-md-5">
      <div class="form-group"><input type="email" class="form-control" placeholder="Email"></div>
    </div>
    <div class="col-md-2"><button type="button" class="btn btn-danger js-remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>REMOVE</button></div>
  </div>
  <div class="clear"></div>
</div>
`;


jQuery(function($) {

  //fadeout selected item and remove
  $(".panel").on('click', '.js-remove', function(e) {
    e.preventDefault();
    $(this).closest(".custom-fields").fadeOut(300, function() {
      $(this).remove();
    });
  });

  //add input
  $('#add-allocation-fields').click(function(e) {
    $(field).appendTo('#fund-allocation-fields').fadeIn("slow");
  });

});

#fund-allocation-fields{background: #eee; padding: 10px;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">

  <div class="panel-heading">
    <center><b>Allocation of Funds</b></center>
  </div>

  <div class="panel-body">

    <div class="row">
      <div class="col-md-5"><label for="exampleInputPassword1">Allocation Items</label></div>
      <div class="col-md-5"><label for="exampleInputPassword1">Amount</label></div>
      <div class="col-md-2"></div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div>
      </div>
      <div class="col-md-5">
        <div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div>
      </div>
      <div class="col-md-2"><button type="button" class="btn btn-success" id="add-allocation-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>ADD</button></div>
    </div>

    <div id="fund-allocation-fields">

    </div>

  </div>

</div>

score 0 · Answer 3 · answered Feb 03 '18 at 15:19

0

Simply change the #remove-allocation-fields to a class rather than id i.e .remove-allocation-fields both in the JavaScript and appended HTML

answered Feb 03 '18 at 15:19

Silverman42

111
7

Dynamically Add / Remove Fields - Remove Button not removing Fields

3 Answers3