反应：删除没有 id 的元素。使用状态/设置状态

Question

用户可以根据需要添加任意数量的 div。但他也可以删除其中的一些。我不使用任何ID。 我已经阅读了一些关于删除的主题，都使用 filter/splice，但使用了 Id。 没有ID怎么删除div？

---

app.js

  addDiv = () => {
      this.setState({
          divs: [...this.state.divs, {...}]
      })
  };

添加新的 div 块：

<button onClick={this.addDiv}>Add New</button>

---

div.js

新的 div 块结构：

更新：对不起，我的错误，在“行”div 中又忘记了 1 个div。所以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：更新了删除功能。我确实按照我的计划工作，但如果这是一个清晰的编码 - 不知道。还是谢谢！

Answer 1

从 DOM 中删除 HTML 元素的第一项工作是找到/get 那个元素。然后应用删除。

但是，在这里您可以跟踪组件状态下的 div。因此，简而言之，您必须有一些键可以唯一地指向 state 和 DOM 中的那个元素。 所以，当然，您的 remove 方法必须完成两项工作：

1. 从 DOM 中查找元素，在您的情况下可以通过 e.target.parentNode 实现，然后通过调用 .remove 方法将其删除。
2. 在您的state 对象中过滤divs 对象，以便可以删除div

以防万一，您可能必须在 1 之前执行 2。

---

更新：添加了一个关于如何添加和删除元素并在组件状态中跟踪它们的完整示例

Codesandbox 我展示了如何在不修改 HTML DOM 的情况下删除和添加元素。这一切都是为了修改 React Virtual DOM（通过更新 state 并因此重新渲染），它在底层修改了 HTML DOM。此外，这里的元素（我们正在添加和删除）的 JSX 完全存储在使其可动态编辑的状态中。

Answer 2

你可以用parentElement代替id。

在onClick 处理程序方法中，您可以访问事件对象，该对象将包含对该按钮（已单击）的父对象的引用。因此，遍历 DOM，您可以获取所需的parentElement（在您的情况下，只需要向上两层就可以了），并将其从 DOM 树中删除。像这样的：

function removeDiv(e) {
    e.target.parentElement.parentElement.remove();
}

另外，记得查看browser compatibility

编辑#1

在你的情况下，额外的.parentElement 是必要的，我完全错过了。 我已经相应地更新了我的答案。正如我所提到的，您可以继续遍历 DOM（这意味着您可以一直链接到您想要的为止），只要确保您不要尝试超出 DOM 树的末端（= 根），即@987654327 @

Answer 3

在remove函数内部，我们可以访问事件(e)，因此可以获取按钮(e.currentTarget)的父元素(element.parentNode)并将其删除：

const remove = (e) => {
   e.currentTarget.parentNode.remove();
};