Ребята, хочу что бы соответствующая кнопка удаляла строку на которой находится, а получается так что первая кнопка удаляет все строки. и еще вопрос по поводу нумерации. корректно ли я сделала? и еще такая вещь: по ходу когда удалены все строки, то нумерация будет продолжатся, то есть по идеи строка должна быть первой, а она 12. как это исправить подскажите
var counter = 1;
var table = document.querySelector('.table tbody');
buttonClick.addEventListener('click', function(e) {
var t = document.getElementById('t');
var row = t.insertRow();
var target = e.target;
if (target.tagName = 'button') {
row.insertCell().innerHTML = counter;
counter++;
}
row.insertCell().innerHTML = fild.value;
row.insertCell().innerHTML = '<input type="button" value="DELETE" id="del" />';
var del = document.getElementById('del');
//del.addEventListener('click', function(el){
var str = document.querySelectorAll('#table tr');
del.addEventListener('click', function(but) {
var trq = this.parentNode.parentNode;
t.deleteRow(trq.rowIndex);
})
fild.value = "";
})
#fild {
margin-bottom: 20px;
}
table {
height: 100px;
width: 100%;
}
#firstLine {
text-align: center;
}
tr td {
border: 1px solid black;
}
#buttonClick {
margin-bottom: 20px;
}
<p>Name of employer</p>
<input type="text" id="fild"><br>
<button id="buttonClick">Result</button>
<div id="table">
<table id="t">
<tr id="firstLine">
<td>№</td>
<td>Name of employer</td>
<td>Delete</td>
</tr>
</table>
</div>