admin管理员组文章数量:1405600
I have two buttons add and remove which add and remove divs(which contain other divs) but, if I want to remove a row I can remove only the last row(div), so I thought to add some "remove buttons" at the end of each row(div). The problem is that I did that but I can only remove the first row for only one time and I can't remove the other rows.
HTML CODE:
<form action='' method='post'>
<div class='row'>
<div class='col-md-2 col-sm-2 col-lg-2'> <h4>Manufacturing_part_no</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Type</h4></div>
<div class='col-md-2 col-sm-2 col-lg-2'><h4>Description</h4> </div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Value</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Voltage</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Power</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Percent.%</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'><h4>Quantity</h4> </div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Rack_no</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Proj. Name</h4></div>
</div>
<div id='forma' >
<div class='row row1'>
<div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type1'></div>
<div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn1' value='1'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div>
<br>
</div>
</div>
<div id='shto_heq' class=''>
<hr>
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<button id='shto' class='btn btn-primary btn-block' type='button'>Add Row <span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<button id='heq' class='btn btn-danger btn-block' type='button'>Remove Row <span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<input type="text" id="numberofrows" name="maxrows" class="form-control" value="1" style="display:none;">
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<div id="numrirrjeshtave"></div>
</div>
</div>
</div>
<div id='butoni_submit' class=''>
<hr>
<button id='butoni' class='btn btn-success btn-block btn-lg' name='submit' type='submit'>Submit The Data <span class='glyphicon glyphicon-ok' aria-hidden='true'></button>
</div>
</form>
JQUERY CODE:
<script>
//this is where I add and remove rows, but only from the end.
var1=1;var2=var1+1;
$("#shto").click(function(){
$('.row'+var1).after("<div class='row row"+var2+" hapesirandermjetrow'><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no"+var2+"'></div> <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type"+var2+"'></div><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn"+var2+"' value='"+var2+"'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div><br></div>");
var2=var2+1;var1=var1=var1+1;
$('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
$('#numberofrows').val(var1);
});
$("#heq").click(function(){
$('.row'+var1).remove();
var2=var2-1;var1=var1=var1-1;
$('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
$('#numberofrows').val(var1);
});
</script>
<script>
// This is where i want to remove a specific row.
$(document).ready(function(){
var3=$(".button-remove").click().val();
$(".button-remove").click(function(){
$(this).closest('.row').remove();
});
});
</script>
Screenshoot:
I have two buttons add and remove which add and remove divs(which contain other divs) but, if I want to remove a row I can remove only the last row(div), so I thought to add some "remove buttons" at the end of each row(div). The problem is that I did that but I can only remove the first row for only one time and I can't remove the other rows.
HTML CODE:
<form action='' method='post'>
<div class='row'>
<div class='col-md-2 col-sm-2 col-lg-2'> <h4>Manufacturing_part_no</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Type</h4></div>
<div class='col-md-2 col-sm-2 col-lg-2'><h4>Description</h4> </div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Value</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Voltage</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Power</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Percent.%</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'><h4>Quantity</h4> </div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Rack_no</h4></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <h4>Proj. Name</h4></div>
</div>
<div id='forma' >
<div class='row row1'>
<div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type1'></div>
<div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no1'></div>
<div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn1' value='1'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div>
<br>
</div>
</div>
<div id='shto_heq' class=''>
<hr>
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<button id='shto' class='btn btn-primary btn-block' type='button'>Add Row <span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<button id='heq' class='btn btn-danger btn-block' type='button'>Remove Row <span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<input type="text" id="numberofrows" name="maxrows" class="form-control" value="1" style="display:none;">
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<div id="numrirrjeshtave"></div>
</div>
</div>
</div>
<div id='butoni_submit' class=''>
<hr>
<button id='butoni' class='btn btn-success btn-block btn-lg' name='submit' type='submit'>Submit The Data <span class='glyphicon glyphicon-ok' aria-hidden='true'></button>
</div>
</form>
JQUERY CODE:
<script>
//this is where I add and remove rows, but only from the end.
var1=1;var2=var1+1;
$("#shto").click(function(){
$('.row'+var1).after("<div class='row row"+var2+" hapesirandermjetrow'><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no"+var2+"'></div> <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type"+var2+"'></div><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn"+var2+"' value='"+var2+"'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div><br></div>");
var2=var2+1;var1=var1=var1+1;
$('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
$('#numberofrows').val(var1);
});
$("#heq").click(function(){
$('.row'+var1).remove();
var2=var2-1;var1=var1=var1-1;
$('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
$('#numberofrows').val(var1);
});
</script>
<script>
// This is where i want to remove a specific row.
$(document).ready(function(){
var3=$(".button-remove").click().val();
$(".button-remove").click(function(){
$(this).closest('.row').remove();
});
});
</script>
Screenshoot:
Share Improve this question asked Apr 20, 2015 at 11:05 Alban KaperiAlban Kaperi 6456 silver badges13 bronze badges 2- 2 Could you create a fiddle ? That will be easy to check and get us back to you soon :) – Vigneswaran Marimuthu Commented Apr 20, 2015 at 11:06
- #Vigneswaran Marimuthu jsfiddle/alban_kaperi/bfcwpcmu – Alban Kaperi Commented Apr 20, 2015 at 11:25
5 Answers
Reset to default 2JS
$(document).ready(function(){
var3=$(".button-remove").click().val();
$(document).on("click",".button-remove",function(){
$(this).closest('.row').remove();
});
});
Click event wasn't placed for The button to make it work just use the above code
DEMO
Issue is after removing the first row ..there is no row0 class aailable to append the code hence you check here if the div with class .row0 is available or not.
var1=1;var2=var1+1;
$("#shto").click(function(){
if($('.row'+var1).is(":visible"))
$('.row'+var1).after("<div class='row row"+var2+" hapesirandermjetrow'><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no"+var2+"'></div> <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type"+var2+"'></div><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn"+var2+"' value='"+var2+"'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div><br></div>");
else
$('#forma').append("<div class='row row"+var2+" hapesirandermjetrow'><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='manufacturing_part_no"+var2+"'></div> <div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='type"+var2+"'></div><div class='col-md-2 col-sm-2 col-lg-2'> <input type='text' class='form-control' name='description"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='value"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='voltage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='power"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='percentage"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='quantity"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <input type='text' class='form-control' name='rack_no"+var2+"'></div><div class='col-md-1 col-sm-1 col-lg-1'> <button type='button' class='btn btn-danger btn-block button-remove' name='btn"+var2+"' value='"+var2+"'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></div><br></div>");
var2=var2+1;var1=var1=var1+1;
$('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
$('#numberofrows').val(var1);
});
$("#heq").click(function(){
$('.row'+var1).remove();
var2=var2-1;var1=var1=var1-1;
$('#numrirrjeshtave').html("<button id='numrirrjeshtave' class='btn btn-default btn-block' type='button'>Number of Rows is: "+var1+"</button>");
$('#numberofrows').val(var1);
});
// This is where i want to remove a specific row.
$(document).ready(function(){
var3=$(".button-remove").click().val();
$(".button-remove").click(function(){
$(this).closest('.row').remove();
});
});
DEMO FIDDLE
Simply replace your remove script with below script:
<script>
// This is where i want to remove a specific row.
$(document).ready(function(){
var3=$(".button-remove").click().val();
//$(".button-remove").click(function(){
$(document).on('click', '.button-remove', function(){
$(this).closest('div').parent('div').remove();
console.log($(this).closest('div'));
});
});
</script>
You should try this there are basically two approach you can delete a row
First is
$(".button-remove").click(function(){
$(this).parent().parent().remove();
});
Second is
$(document).ready(function(){
var3=$(".button-remove").click().val();
$(document).on("click",".button-remove",function(){
$(this).closest('.row').remove();
});
});
You can see the First demo
Second Demo
Do it with classnames, and use ".closest(selector)" to select the closest element (parents) matching the selector to select the "current row".
This will only work on the delete button at each row.
$(".button-remove").on("click", function(e) {
e.preventDefault();
$(this).closest(".row").remove();
});
I would remend changing the class-names to something js specific.
本文标签： javascriptjQuery add and remove HTML elements with nested divStack Overflow
版权声明：本文标题：javascript - jQuery add and remove HTML elements with nested div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744290605a2599093.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论