按照 <form> <label for="newColumn">添加栏目:</label> <input type="text" id="newColumn" name="newColumn"> <button type="button" onclick="addColumn()">添加</button> </form> 再帮我接着写一个删除栏目
时间: 2023-07-19 12:45:22 浏览: 31
好的,你可以试试这个代码:
```html
<form>
<label for="newColumn">添加栏目:</label>
<input type="text" id="newColumn" name="newColumn">
<button type="button" onclick="addColumn()">添加</button>
</form>
<ul id="columnList">
<li>栏目1 <button type="button" onclick="deleteColumn(event)">删除</button></li>
<li>栏目2 <button type="button" onclick="deleteColumn(event)">删除</button></li>
<li>栏目3 <button type="button" onclick="deleteColumn(event)">删除</button></li>
</ul>
<script>
function addColumn() {
var newColumn = document.getElementById("newColumn").value;
var columnList = document.getElementById("columnList");
var li = document.createElement("li");
li.innerText = newColumn + " ";
var button = document.createElement("button");
button.type = "button";
button.innerText = "删除";
button.onclick = deleteColumn;
li.appendChild(button);
columnList.appendChild(li);
document.getElementById("newColumn").value = "";
}
function deleteColumn(event) {
event.target.parentNode.remove();
}
</script>
```
这里我假设你已经有一个栏目列表的 `ul` 元素,其中每个栏目是一个 `li` 元素,并且每个栏目后面都有一个删除按钮。删除按钮的点击事件是 `deleteColumn` 函数。这个函数的作用是删除当前按钮所在的栏目。
你可以根据自己的需求修改 `addColumn` 和 `deleteColumn` 函数的实现。