I am currently having a problem upon addition of elements to a div. Upon clicking the links with class closeBtn
, the output on the console.log()
should be their ID. I am not quite sure what went wrong, since I checked i
and it increments properly. Maybe I just overlooked something, although I can't figure it out.
What I want is for every delRow()
to output the id that the current row it is on.
Here is the HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function addRow() {
var divRow = document.getElementsByClassName("row");
var subRow = document.getElementsByClassName("subRow");
var subLastElement = subRow[subRow.length-1].outerHTML;
divRow[0].innerHTML += subLastElement;
var closeArr = document.getElementsByClassName("closeBtn");
// The problem here is that it adds the most recently made function for every close button.
for(i = 1; i < closeArr.length; i++) {
var idToStr = "x" + i.toString();
closeArr[i].id = idToStr;
closeArr[i].onclick = () => delRow(idToStr);
}
}
function delRow(id) {
console.log(id);
}
</script>
</head>
<body>
<div class="row">
<div class="subRow">
<a href="#" class="addRow" onclick="addRow()">Add row</a>
<span class="subSubRow">
<a href="#" id="x1" class="closeBtn">×</a>
</span>
</div>
</div>
</body>
</html>
Below are the outputs when I click × as of the moment:
Current output upon clicking x:
First row = No output
Second Row = x1
Upon adding another row:
First row = No output
Second Row = x2
Third Row = x2
This is the output I am expecting:
Expected output upon clicking x:
First row = x0
Second Row = x1
Upon adding another row:
First row = x0
Second Row = x1
Third Row = x2