js实现点按钮多画一个div,点按钮删除一行div
时间: 2024-03-20 12:44:12 浏览: 22
好的,这是一个比较简单的任务,你需要先创建一个按钮,然后在按钮的点击事件中实现添加和删除div的功能。以下是一个参考实现:
HTML 代码:
```html
<button id="add-btn">添加</button>
<div id="container"></div>
```
JavaScript 代码:
```javascript
const container = document.getElementById('container');
const addBtn = document.getElementById('add-btn');
let count = 0;
addBtn.addEventListener('click', () => {
// 添加div
const div = document.createElement('div');
div.textContent = `这是第 ${++count} 行`;
container.appendChild(div);
// 添加删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
div.appendChild(deleteBtn);
// 删除按钮点击事件
deleteBtn.addEventListener('click', () => {
container.removeChild(div);
count--;
});
});
```
首先,我们通过 `getElementById` 方法获取到 DOM 元素,然后添加一个点击事件监听器。在点击事件中,我们创建一个新的 div 元素,并将其添加到容器中。同时,我们还创建了一个删除按钮,并将其添加到新创建的 div 元素中。在删除按钮的点击事件中,我们移除对应的 div 元素,并更新计数器。