点击按钮内容传递给两列列表显示,有删除功能JS方法
时间: 2024-04-16 13:28:30 浏览: 24
你可以使用JavaScript来实现点击按钮后将内容传递给两列列表,并带有删除功能。下面是一个简单的示例代码:
HTML部分:
```html
<input type="text" id="inputText">
<button onclick="addItem()">添加</button>
<h3>列表1</h3>
<ul id="list1"></ul>
<h3>列表2</h3>
<ul id="list2"></ul>
```
JavaScript部分:
```javascript
function addItem() {
// 获取输入框的值
var input = document.getElementById("inputText").value;
// 创建新的列表项
var li = document.createElement("li");
li.innerHTML = input;
// 创建删除按钮
var deleteBtn = document.createElement("button");
deleteBtn.innerHTML = "删除";
deleteBtn.onclick = function() {
// 当点击删除按钮时,移除对应的列表项
li.remove();
};
// 将列表项和删除按钮添加到列表1中
document.getElementById("list1").appendChild(li);
li.appendChild(deleteBtn);
// 将列表项添加到列表2中
document.getElementById("list2").appendChild(li.cloneNode(true));
// 清空输入框的值
document.getElementById("inputText").value = "";
}
```
这段代码将获取输入框中的值,创建一个新的列表项,并将其添加到“列表1”中。同时,它还创建了一个删除按钮,当点击该按钮时,对应的列表项将被移除。然后,它将列表项添加到“列表2”中,并确保两个列表中的项相互独立。
希望这可以帮助到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)