Unmounting React.js node

Unmount components from the same DOM element that you mount them in. So if you did something like:

ReactDOM.render(<SampleComponent />, document.getElementById('container'));

Then you would unmount it with:

ReactDOM.unmountComponentAtNode(document.getElementById('container'));

Here is a simple JSFiddle where we mount the component and then unmount it after 3 seconds.

This worked for me. You may want to take extra precautions if findDOMNode returns null.

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);

The example I use:

unmount: function() {
  var node = this.getDOMNode();
  React.unmountComponentAtNode(node);
  $(node).remove();
},

handleClick: function() {
  this.unmount();
}

You don't need to unmount the component the simple solution it's change the state and render a empty div

const AlertMessages = React.createClass({
  getInitialState() {
    return {
      alertVisible: true
    };
  },
  handleAlertDismiss() {
    this.setState({alertVisible: false});
  },
  render() {
    if (this.state.alertVisible) {
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Oh snap! You got an error!</h4>
        </Alert>
      );
    }
    return <div></div>
  }
});

As mentioned in the GitHub issue you filed, if you want access to a component's DOM node, you can use this.getDOMNode(). However a component can not unmount itself. See Michael's answer for the correct way to do it.