Html 删除整个div，包括子div'；单击“删除”按钮时单击“删除”

我是reactjs开发的新手，我正在努力删除整个部门，包括点击“删除”按钮删除子部门。添加整个div工作正常，但我不确定如何在单击“删除”按钮时删除整个div

class Createloc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
      rows: [],
    }
    this.addRow = this.addRow.bind(this)
    this.deleteRow = this.deleteRow.bind(this)
  }
  // divID = nextId();

  addRow() {
    this.setState({ count: this.state.count + 1 })
    console.log(`Increase count: ${this.state.count}`)
  };

  deleteRow(e) {
    // ==> not sure
    // console.log("delete");
  };

  addingDivs() {
    let count = this.state.count, uiItems = [];
    while (count--)
      uiItems.push(
        <div className="newHost" id={this.divID}>
          <div className="hostInput">
            <input type="text" placeholder="Enter Building Name" />
          </div>
          <div className="hostInput">
            <input type="text" placeholder="Enter Employee Name" />
          </div>
          <div className="hostInput">
            <button className="btn btn-danger" type="button" onClick={this.deleteRow}>Remove</button>
          </div>
        </div>
      )
    return uiItems;
  }

  render() {
    return (
        <form className="form">
          <div className="addButton">
            <button type="button" onClick={this.addRow}>Add</button>
            {this.addingDivs()}
          </div>
        </form>
    )
  }
}

export default Createloc;

class Createloc扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计数：1，
行：[]，
}
this.addRow=this.addRow.bind（this）
this.deleteRow=this.deleteRow.bind（this）
}
//divID=nextId（）；
addRow（）{
this.setState（{count:this.state.count+1}）
log（`rease count:${this.state.count}`）
};
删除行（e）{
//==>不确定
//控制台日志（“删除”）；
};
添加divs（）{
让count=this.state.count，uiItems=[]；
而（计数--）
uiItems.push(
去除
)
归还物品；
}
render（）{
返回(
添加
{this.addingDivs（）}
)
}
}
导出默认Createloc；

---

PS：为了避免混淆，我没有包括我试图删除的伪行。

我可以通过应用以下命令将添加的行作为堆栈删除：

 deleteRow(e) {
    this.setState({ count: this.state.count - 1 })
  };

谢谢