.clone() and .remove() method in jquery

Question

My task is to achive the functionality, when I click on a button, then it add a full row, which is achived by me by .clone() method. Now I want to delete this. When I click on cross button, then only remove that line. As shown in image:

When I click on cross, then remove that line. My code is:

$(document).ready(function () {

    $("button#add").click(function(){   
    $(".abcd:last").clone().appendTo(".wrapper");  
});
$(".glyphicon-remove").click(function () {

        $(".abcd:last").remove();
    });

});

html:

<div class="wrapper">
          <div class="form-group abcd" id="abcde">      
            <div class="col-sm-12" >
              <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li class="week"><a href="#">Monday</a></li><li class="week"><a href="#">Tuesday</a></li>
                  <li class="week"><a href="#">Wednesday</a></li><li class="week"><a href="#">Thusday</a></li>
                  <li class="week"><a href="#">Friday</a></li><li class="week"><a href="#">Saturdayy</a></li>
                  <li class="week"><a href="#">Sunday</a></li>
                </ul>
             </div> 
             <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li class="week"><a href="#">Monday-saturaday</a></li>
                </ul>
             </div> 
             <label for="exampleInputEmail1"> : </label>
              <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" style="height: 10em;width:2em;  overflow: auto;">
                  <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li>
                  <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>                  
                  <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>                  
                  <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>                  
                </ul>
             </div>
              <label for="exampleInputEmail1"> to </label>
            <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li class="week"><a href="#">Monday-saturaday</a></li>
                </ul>
            </div> 
            <label for="exampleInputEmail1"> : </label>
            <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" style="height: 10em;width:2em;  overflow: auto;">
                  <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li>
                  <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>                  
                  <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>                  
                  <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>                  
                </ul>
             </div>
                <span class="glyphicon glyphicon-remove"></span>
          </div>
       </div>
       </div>
    </form>

     <button type="button" id="add" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add</button>
    <button type="button" id="remove" class="btn btn-default dropdown-toggle" data-toggle="dropdown">remove</button>

I am able to add New line by click on add button, but unable to hide that line by click on cross.

Note: remove only that line, which line cross button is selected.

Answer 1

First, you'll need to change your clone to that :

$(".abcd:last").clone(true).appendTo(".wrapper");

Passing true mean that it is cloning events as well.

Then, in your remove function, you'll need to use this keyword. this will be the button clicked. You can then use DOM traversal method like closest to remove your row :

$(".glyphicon-remove").click(function () {

    $(this).closest(".abcd").remove();
});

Answer 2

Alternatively, you can bind the event to the container like this:

$(document).ready(function () {

    $("button#add").click(function () {
            $(".abcd:last").clone().appendTo(".wrapper");
    });

    $(".wrapper").on('click', '.glyphicon-remove', function () {
            $(".abcd:last").remove();
    });

})