<!DOCTYPE html>
<html>
<head>
<title>要素の増減</title>
</head>
<body>
<h1>やりたいことのイメージ</h1>
<button id="addButton">要素追加</button>
<button id="removeButton">要素削除</button>
<div id="elementContainer"></div>
<script>
const addButton = document.getElementById("addButton");
const removeButton = document.getElementById("removeButton");
const elementContainer = document.getElementById("elementContainer");
let elementCount = 0;
addButton.addEventListener("click", () => {
const newElement = document.createElement("div");
newElement.classList.add("menu-item");
newElement.innerHTML = `
<h3 class="menu" id="menu${elementCount}" data-name="menu${elementCount}">メニュー${elementCount}</h3>
<p class="price" data-name="price${elementCount}">価格${elementCount}</p>
`;
elementContainer.appendChild(newElement);
elementCount++;
});
removeButton.addEventListener("click", () => {
const elements = document.getElementsByClassName("menu-item");
if (elements.length > 0) {
elementContainer.removeChild(elements[elements.length - 1]);
elementCount--;
}
});
</script>
</body>
</html>
