Есть строка которая добавляется по нажатию кнопки .plus,
и есть кнопка .delete , удаляющая строку, как составить функцию удаления чтобы строки удалялись и после нажатия плюса и без такого нажатия
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.table_row{
width:605px;
background:#ee9;
}
input {
height:20px;
margin: 0;
padding: 0;
}
.field{
height:20px;
width:133px;
background:#eee;
text-align:center;
border:1px solid #000;
float:left;
}
.field_next{
height:20px;
width:133px;
background:#eee;
text-align:center;
border:1px solid #000;
float:left;
margin-left:4px;
}
.delete{
border:1px solid #000;
position:relative;
float:left;
width:50px;
height:20px;
background-color:#eee;
background-image:url(http://lopushansky.com/images/delete.png);
cursor:pointer;
background-size:contain;
}
#table_main{
width:680px;
margin:0 auto;
margin-top:10px;
height:200px;
background:#eee;
position:relative;
overflow-y:scroll;
}
.delete_rub{
border:1px solid #000;
position:relative;
float:left;
width:50px;
height:20px;
background-color:#eee;
cursor:pointer;
background-size:contain;
}
.plus{
border:1px solid #000;
position:absolute;
top:20px;
right:0;
width:50px;
height:20px;
background-color:#eee;
background-image:url(http://lopushansky.com/images/plus.png);
cursor:pointer;
background-size:contain;
}
</style>
<div id="canva_box">
<div id="table_main">
<div class="table_row">
<div class="delete_rub"></div>
<div class="table">
<div class="field">id</div>
<div class="field_next">field_name</div>
<div class="field_next">x</div>
<div class="field_next">y</div>
</div>
</div>
<div class="table_row">
<div class="delete"></div>
<div class="table">
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
</div>
</div>
<div class="plus"></div>
</div>
</div>
<script>
$('.plus').click(function(){
var a = '<div class="table_row"><div class="delete"></div><div class="table"><input type="text" value=""><input style="margin-left: 4px" type="text" value=""><input style="margin-left: 4px" type="text" value=""><input style="margin-left: 4px" type="text" value=""></div></div>'
$('#table_main').append(a)
$(this).css({top:'+=22'})
$('.delete').click(function(){
$(this).parent('.table_row').remove();
$('.plus').css({marginTop:-22})
})
})
</script>
