Delete the entire div including subdiv's on clicking the remove button - html

Question

I am new to reactjs development and I'm trying real hard to delete the entire division including sub divisions on clicking "remove" button. The addition of entire div is working smoothly, but I am not sure how can I perform deletion of entire div on clicking remove button.
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;
PS: I have not included the pseudo I tried to delete just to avoid confusion.

Answer 1

I was able to delete the added row as a stack by applying below:
deleteRow(e) {
this.setState({ count: this.state.count - 1 })
};
Thanks!