Remove multiple text box in on-click

Question

Adding multiple text-box using j-query

HTML

<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"><a href="javascript:void(0);" class="add" ><span class="glyphicon glyphicon-plus"></span></a></div>
<div class="contents"></div>
</div>

And script like

<script>
$(document).ready(function() {
$(".add").click(function() {
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
});
});
</script>

The above query is used to add multiple text box that properly working and i try to remove added items in remove button but that only remove one text box only i am using this script

<script>
$('.contents').on('click', '.rem', function() {
$(this).parent("div").remove();
});
</script>

any way to remove the clicked full row only ? enter image description here

Answer 1

You can rewrite code like this. You are removing the container, that was the issue

 $(document).ready(function() { $(".add").click(function() { var container= $('<div>'); $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container); $('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(container); $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container); $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container); $('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(container); $('.childControl').after($(container).clone()); }); $('.contents').on('click', '.rem', function() { $(this).parent("div").parent("div").empty(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12"> <div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div> <div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div> <div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div> <div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div> <div class="col-md-1" style="margin-top:30px;"><a href="javascript:void(0);" class="add" ><span class="glyphicon glyphicon-plus"></span>Add</a></div> <div class="contents"><div class="childControl"></div> </div> 

Answer 2

The parent should be grand parent, try below code

replace $(this).parent("div").remove(); 

with

$(this).parent().parent().remove();

so final code is:

<script>
$('.contents').on('click', '.rem', function() {
$(this).parent().parent().remove();
});
</script>

Answer 3

Updated answer: Use prevUntil() to achieve this:

 $('.contents').on('click', '.rem', function() { $(this).parent().prevUntil(".col-md-1").remove(); $(this).parent().remove(); }); $(document).ready(function() { $(".add").click(function() { $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents"); $('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents"); $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents"); $('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents"); $('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span><hr></div>').appendTo(".contents"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12"> <div class="col-md-3"><label>Name</label><input type="text" class="form-control" name="" /></div> <div class="col-md-2"><label>Count</label><input type="text" class="form-control" name="" /></div> <div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name="" /></div> <div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name="" /></div> <div class="col-md-1" style="margin-top:30px;"> <a href="javascript:void(0);" class="add"><span class="glyphicon glyphicon-plus">Add this</span></a> </div> <div class="contents"></div> </div>