При нажатии кнопки «Добавить» на html-странице на html-странице должен отображаться div, а несколько div должны отображаться при нескольких щелчках. Каждый div должен иметь значок X, и при нажатии x div должен исчезнуть из пользовательского интерфейса. Также он должен поддерживать массив идентификаторов динамически сгенерированных элементов div, которые должны отображаться на консоли, и этот идентификатор следует удалять всякий раз, когда этот конкретный элемент div удаляется.
Этот код работает нормально, но вместо использования счетчика я могу использовать массив, в котором динамически идентификатор будет генерироваться всякий раз, когда создается div, и идентификатор должен быть удален при удалении div?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to make a Division element.</p>
<button id="button" onclick="myFunctionAdd()">Add</button>
<div id="myDIV">
</div>
<script>
var counter=1;
function myFunctionAdd()
{
var x = document.createElement("DIV");
x.id="div"
var divNumber = counter;
counter++;
console.log("Div Number: "+ divNumber + " is created");
var z= document.createElement("button");
z.id="btn";
x.setAttribute("style", "border :1px solid;height: 250px; width: 250px; top: 741px; left: 491px; padding:10px; margin: 50px;");
z.setAttribute("style", "background: #000 url(/home/subodh/Desktop/Widget/icon_incorrect.svg) no-repeat 0px 0px; height: 30px; width:40px; top: 6px; left: 4px; float: right; margin: 0px; padding:0px; clear: both; float:right;");
x.appendChild(z);
document.body.appendChild(x).appendChild(z);
z.onclick = function remove(btn)
{
console.log("Div Number: "+ divNumber + " is deleted");
x.parentElement.removeChild(x);
}
}
</script>
</body>
</html>
