用户可以根据需要添加任意数量的 div。但他也可以删除其中的一些。我不使用任何ID。我读过一些关于删除的主题，全部使用filter/splice，但使用 Id。没有ID怎么可能删除div？应用程序.js addDiv = () => { this.setState({ divs: [...this.state.divs, {...}] }) };添加新的 div 块：<button onClick={this.addDiv}>Add New</button>分区.js新的 div 块结构：div更新：抱歉，我的错误，在“行”div 中又忘记了 1 个。所以我猜是行不通的parentNode。parentElement<div className="row"> <div className="col-12"> <div> </div> <div> <p></p> </div> <button onClick={remove()}>Remove</button> //* here remove the whole block with classname "row" */ </div> </div>const remove = () => { e.currentTarget.closest('.row').remove()};更新 2：e.currentTarget.parentNode.remove();工作也是如此。简单快捷。但正如我之前所写：'row'-div 保持不变。有什么建议么？更新 3：更新删除功能。我确实按照我的计划工作，但如果这是一个清晰的编码 - 不知道。不管怎么说，还是要谢谢你！
3 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
从 DOM 中删除 HTML 元素的第一项工作是找到get该元素。然后应用删除。
但是，在这里您可以跟踪组件状态下的 div。因此，简而言之，您必须有一些键可以唯一地指向状态和 DOM 中的那个元素。所以，当然，你的remove方法必须做两个工作：
从 DOM 中找到元素，
e.target.parentNode在您的情况下可以通过调用它的.remove方法将其删除。过滤
divs对象中的state对象，以便div可以删除
以防万一，您可能必须在1之前执行2。
更新：添加了一个关于如何添加和删除元素并在组件状态中跟踪它们的完整示例
我展示了如何在不修改 HTML DOM 的情况下删除和添加元素的代码沙盒。这一切都是关于修改React Virtual DOM（通过更新状态并因此重新渲染），在幕后修改 HTML DOM。此外，这里元素的 JSX（我们正在添加和删除）完全存储在使其动态可编辑的状态中。
缥缈止盈
TA贡献2041条经验 获得超4个赞
您可以使用parentElement而不是 id 。
在onClick处理程序方法中，您可以访问事件对象，该对象将包含对该按钮（已单击）的父对象的引用。因此遍历 DOM，您可以获取所需的内容parentElement（在您的情况下，只有两层以上应该没问题），并将其从 DOM 树中删除。是这样的：
function removeDiv(e) {
e.target.parentElement.parentElement.remove();
}
另外，记得检查浏览器兼容性
编辑#1
.parentElement你的情况需要额外的，我完全错过了。我已经相应地更新了我的答案。正如我所提到的，您可以继续遍历 DOM（这意味着您可以继续将其链接到您想要的为止），只要确保您不要尝试超出 DOM 树的末端（= 根）即可，即，<HTML>
开满天机
TA贡献1786条经验 获得超13个赞
在 remove 函数中，我们可以访问事件 ( e)，因此可以获取element.parentNode按钮 ( ) 的父元素 ( e.currentTarget) 并将其删除：
const remove = (e) => {
e.currentTarget.parentNode.remove();
};添加回答
举报
0/150
提交
取消