javascript - Javascript - 撤消按钮以删除添加的元素
问题描述
我正在努力制作我的撤消按钮(删除通过我的“addText”函数创建的最后一个文本框,并且似乎无法使其正常工作。当前位置的撤消按钮就像另一个“添加”按钮......
HTML:
<div id="planner">
<div class="week week1">
<div class="add">
<h1>Weeks</h1>
<textarea></textarea>
<button type="submit">Add text</button>
<button type="button"onClick="removeText()">Undo</button>
</div>
</div>
<div class="week week2">
<div class="add">
<h1>Topics</h1>
<textarea></textarea>
<button type="submit">Add text</button>
<button type="button"onClick="removeText()">Undo</button>
</div>
</div>
Javascript:
var addButtons = document.querySelectorAll('.add button');
var removeButtons = document.querySelectorAll('.remove button');
function addText () {
var self = this;
var weekParent = self.parentNode.parentNode;
var textarea = self.parentNode.querySelector('textarea');
var value = textarea.value;
var item = document.createElement("p");
var text = document.createTextNode(value);
item.appendChild(text);
weekParent.appendChild(item);
}
function removeText() {
var node = document.getElementById('p');
if (node.hasChildNodes())
node.removeChild(node.lastChild);
}
for (i = 0; i < addButtons.length; i++) {
var self = addButtons[i];
self.addEventListener("click", addText);
}
如果在删除按钮之前使用 div class="p" 它(在正确的位置)可以删除 Weeks、textarea 和它本身(?!),这绝对不是我想要的!本质上,按钮无法移除新创建的文本元素。先感谢您。
解决方案
您的代码有一些问题。首先,您不应该使用getElementById("p")
. 相反,使用document.querySelector("p")
. 即使这样,它也只会返回<p>
整个页面上的第一个元素。
您可能应该做的是保存对最近创建的文本元素的引用。就像是:
var recent;
function addText () {
var self = this;
var weekParent = self.parentNode.parentNode;
var textarea = self.parentNode.querySelector('textarea');
var value = textarea.value;
var item = document.createElement("p");
var text = document.createTextNode(value);
item.appendChild(text);
// save the newly created item
recent = item;
weekParent.appendChild(item);
}
然后当你想删除它时:
if(recent != null){
element.removeChild(recent);
}
我看到的第二个问题是您的添加按钮和删除按钮数组当前存储所有<button>
元素,而不是您要查找的元素。给你的按钮类,只查询那个特定的类。例子:
HTML
<button class="add" type="submit">Add text</button>
<button class="remove" type="button"onClick="removeText()">Undo</button>
JS
var addButtons = document.querySelectorAll('.add');
var removeButtons = document.querySelectorAll('.remove');
推荐阅读
- pytest - 使用 moto 模拟多个 AWS 服务
- javascript - 动态添加按钮 d3.js
- python-3.x - 如何将字符串的类型更改为字节串?
- wordpress - 按产品尺寸(长度、宽度和高度)排序的 Wordpress (Woocommerce)
- c# - 文件中的 Monobehaviour 脚本,或者它们的名称与新建脚本上的文件名不匹配
- java - 如何在Java中不向上/向下取整的值?
- python - Python itertools groupby 与聚合
- swift - 创建项目时选择 SwiftUI 后如何使用 Storyboard?
- python - 标记曲线之间的最大偏差/距离
- ios - Mac 上 SwiftUI 中的 UIDocumentPickerViewController (macCatalyst)