title: React Error: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
body: <p>i am new to react . when i did a search react application i got the error look like above.my components are,</p>
  
  <h2>UserList</h2>
  
  <pre><code>import React, { Component } from "react";
  import $ from "jquery";
  import UserStore from "../../stores/UserStore";
  import * as UserActions from "../../actions/UserActions";
  import AddUser from "./AddUser";
  import moment from "moment";
  import Search from "../Search";
  
  $.DataTable = require("datatables.net");
  
  class UserList extends Component {
    constructor() {
      super();
      this.getUsers = this.getUsers.bind(this);
      this.state = {
        users: UserStore.getAll()
      };
      // this.loadUsers();
    }
  
    componentDidMount() {
      $(document).ready(function() {
        $("#example").DataTable({
          ordering: true
        });
      });
    }
  
    componentWillMount() {
      UserStore.on("change", this.getUsers);
    }
  
    componentWillUnmount() {
      UserStore.removeListener("change", this.getUsers);
    }
  
    getUsers() {
      console.log(" get users called");
      this.setState({
        users: UserStore.getAll()
      });
    }
  
    loadUsers() {
      UserActions.getUsersList();
    }
  
    render() {
      console.log("users " + JSON.stringify(this.state.users));
      const userlistitem = this.state.users.map((user, index) =&gt; (
        &lt;tr key={index}&gt;
          &lt;td scope="row"&gt;{index}&lt;/td&gt;
          &lt;td&gt;{user.name}&lt;/td&gt;
          &lt;td&gt;{user.username}&lt;/td&gt;
          &lt;td&gt;{user.email}&lt;/td&gt;
          &lt;td&gt;{moment(user.dob).format("DD-MM-YYYY")}&lt;/td&gt;
          &lt;td&gt;{user.address}&lt;/td&gt;
          &lt;td&gt;{user.mobile}&lt;/td&gt;
          &lt;td&gt;{user.branch}&lt;/td&gt;
        &lt;/tr&gt;
      ));
      return (
        &lt;div&gt;
          &lt;Search /&gt;
  
          &lt;div
            style={{
              marginTop: 80,
              marginLeft: 150,
              marginRight: 150
            }}
          &gt;
            &lt;div className="card text-white bg-info mb-3"&gt;
              &lt;div className="card-body"&gt;
                &lt;div className="d-flex justify-content-between"&gt;
                  &lt;h5&gt;User List&lt;/h5&gt;
                  &lt;div&gt;
                    &lt;button
                      style={{
                        marginTop: 10
                      }}
                      type="button"
                      className="btn btn-light "
                      data-toggle="modal"
                      data-target="#exampleModalCenter"
                    &gt;
                      Add New User
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;table id="example" className="table table-bordered  table-striped "&gt;
              &lt;thead className="thead-dark"&gt;
                &lt;tr&gt;
                  &lt;th scope="col"&gt;#&lt;/th&gt;
                  &lt;th scope="col"&gt;Name&lt;/th&gt;
                  &lt;th scope="col"&gt;User Name&lt;/th&gt;
                  &lt;th scope="col"&gt;Email&lt;/th&gt;
                  &lt;th scope="col"&gt;DOB&lt;/th&gt;
                  &lt;th scope="col"&gt;Address&lt;/th&gt;
                  &lt;th scope="col"&gt;Mobile&lt;/th&gt;
                  &lt;th scope="col"&gt;Branch&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;{userlistitem}&lt;/tbody&gt;
            &lt;/table&gt;
            &lt;AddUser /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default UserList;
  </code></pre>
  
  <h2>Search</h2>
  
  <pre><code>import React, { Component } from "react";
  import * as UserActions from "../actions/UserActions";
  import "../css/search.css";
  
  import ToggleDisplay from "react-toggle-display";
  import UserList from "./User/UserList";
  
  class Search extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        name: "",
        username: "",
        mobile: "",
        usercreateddate: "",
        show: false
      };
      this.handleInputChange = this.handleInputChange.bind(this);
      this.searchquery = this.searchquery.bind(this);
    }
  
    handleInputChange(e) {
      const target = e.target;
      const value = target.value;
      const name = target.name;
  
      this.setState({
        [name]: value
      });
    }
  
    searchquery = () =&gt; {
      const search = {
        name: this.state.name,
        username: this.state.username,
        mobile: this.state.mobile,
        usercreateddate: this.state.usercreateddate
      };
      console.log("sdsdsd" + JSON.stringify(search));
      UserActions.searchEvents(search);
      this.setState({
        show: true
      });
    };
  
    //   componentDidMount() {
    //     this.search("");
    //   }
  
    render() {
      return (
        &lt;div&gt;
          &lt;br /&gt;
          &lt;div className="container card card-body"&gt;
            &lt;h3&gt;Search Criteria&lt;/h3&gt;
            &lt;div className="col-md-12 form-inline " style={{ padding: 8 }}&gt;
              &lt;div className="col-md-3"&gt;
                &lt;input
                  name="name"
                  type="text"
                  class="form-control"
                  placeholder="Name"
                  id="name"
                  onChange={this.handleInputChange}
                /&gt;
              &lt;/div&gt;
              &lt;div className="col-md-3"&gt;
                &lt;input
                  name="username"
                  type="text"
                  class="form-control"
                  placeholder="User Name"
                  id="username"
                  onChange={this.handleInputChange}
                /&gt;
              &lt;/div&gt;
              &lt;div className="col-md-3"&gt;
                &lt;input
                  name="mobile"
                  type="number"
                  class="form-control"
                  placeholder="Mobile"
                  id="number"
                  onChange={this.handleInputChange}
                /&gt;
              &lt;/div&gt;
              &lt;div className="col-md-3"&gt;
                &lt;input
                  name="usercreateddate"
                  type="text"
                  class="form-control"
                  placeholder="User Created Date"
                  id="usercreateddate"
                  onChange={this.handleInputChange}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button
                type="button"
                className="btn btn-primary"
                onClick={this.searchquery}
                style={{ marginLeft: "491px", marginTop: "15px" }}
              &gt;
                Search
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Search;
  </code></pre>
  
  <h2>Store</h2>
  
  <pre><code>import { EventEmitter } from "events";
  import dispatcher from "../dispatcher/dispatcher";
  
  class UserStore extends EventEmitter {
    constructor() {
      super();
      dispatcher.register(this.handleActions.bind(this));
      this.users = [
        {
          branch: "19",
          name: "Javcbvcsim11",
          username: "zxcv",
          mobile: "5645654",
          email: "demo@gmail.com111",
          address: "Demo vcbvcbAddress1",
          dob: "2020-11-06T00:00:00.000+0000"
        },
        {
          branch: "19",
          name: "Javcbvcsim11",
          username: "zxcv",
          mobile: "5645654",
          email: "demo@gmail.com111",
          address: "Demo vcbvcbAddress1",
          dob: "2020-11-06T00:00:00.000+0000"
        },
        {
          branch: "19",
          name: "Javcbvcsim11",
          username: "zxcv",
          mobile: "5645654",
          email: "demo@gmail.com111",
          address: "Demo vcbvcbAddress1",
          dob: "2020-11-06T00:00:00.000+0000"
        }
      ];
  
      console.log(" store constructor ");
    }
  
    createUser(newUser) {
      this.users.push(newUser);
      console.log("new  users lenght " + this.users.lenght);
      this.emit("change");
    }
  
    getAll() {
      return this.users;
    }
    handleActions(action) {
      switch (action.type) {
        case "RECEIVE_USERS": {
          this.users = action.users;
          this.emit("change");
          break;
        }
        case "CREATE_USER": {
          this.createUser(action.newUser);
          break;
        }
        case "SEARCH_USER": {
          console.log("sadsadsadsadsadsadsadsadsad");
          this.users = action.search;
          this.emit("change");
  
          break;
        }
      }
    }
  }
  
  export default new UserStore();
  </code></pre>
  
  <h2>Action</h2>
  
  <p>import dispatcher from "../dispatcher/dispatcher";</p>
  
  <pre><code>import { BASE_URL } from "../utils/AppConstants";
  
  export function getUsersList() {
    console.log("getting the data! ");
    fetch(BASE_URL + "/users")
      .then(res =&gt; res.json())
      .then(
        result =&gt; {
          console.log("res " + result);
          dispatcher.dispatch({ type: "RECEIVE_USERS", users: result });
        },
        // Note: it's important to handle errors here instead of a catch() block so that
        // we don't swallow exceptions from actual bugs in components.
        error =&gt; {
          //  here manage error and close loading;
          console.log("getting error " + error);
        }
      );
  }
  
  export function createNewUser(user) {
    console.log("post the data!");
    fetch(BASE_URL + "/saveuser", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(user)
    })
      .then(res =&gt; res.json())
      .then(
        result =&gt; {
          dispatcher.dispatch({ type: "CREATE_USER", newUser: user });
        },
        // Note: it's important to handle errors here instead of a catch() block so that
        // we don't swallow exceptions from actual bugs in components.
        error =&gt; {
          //  here manage error and close loading;
          console.log("getting error " + error);
        }
      );
  }
  
  export function searchEvents(search) {
    const url =
      BASE_URL +
      `/searchuser?name=${search.name}&amp;username=${search.username}&amp;mobile=${
        search.mobile
      }&amp;usercreateddate=${search.usercreateddate}`;
    console.log(url);
    fetch(url)
      .then(res =&gt; res.json())
      .then(
        result =&gt; {
          console.log("res jdjdjdjdjdj " + JSON.stringify(result));
          console.log("dfsfsf" + search);
          dispatcher.dispatch({ type: "SEARCH_USER", search: result });
        },
        // Note: it's important to handle errors here instead of a catch() block so that
        // we don't swallow exceptions from actual bugs in components.
        error =&gt; {
          //  here manage error and close loading;
          console.log("getting error " + error);
        }
      );
  }
  </code></pre>
  
  <p>i am here using react with flux procedure. Also the data which showing through jquery datatable.
  the error occurs when i search for the first time suppose by giving username='something' it shows perfectly in my table. The problem occurs when i click the datatable column name or search attached with it it change to the dummy data i already given. also some times the above mentioned error is throwing. if  any one can help it will be much appreciable one.</p>