.clone() and .remove() method in jquery
css, html, javascript, jquery
Solution
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();
});
Problem
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.