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方法必须完成两项工作：

从DOM中找到元素，可以通过e.target.parentNode来实现，并通过调用.remove方法将其删除。
过滤divs对象中的state对象，以便可以删除div

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

已更新：添加了有关如何添加和删除元素以及如何在组件状态下跟踪元素的完整示例

Codesandbox在这里，我展示了如何在不修改HTML DOM的情况下删除和添加元素。完全是通过修改 React虚拟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树的末尾（=根），即{{ 1}}

Answer 3

在删除功能内，我们可以访问事件（e），因此可以获取按钮（element.parentNode）的父元素（e.currentTarget）并将其删除：

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

反应：删除没有ID的元素。 useState / setState

3 个答案:

已更新：添加了有关如何添加和删除元素以及如何在组件状态下跟踪元素的完整示例