JS Error: The node to be removed is not a child of this node

Question

I have two autocomplete textbox on the page to do some advance search in my project. I am getting an error like Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. while removing a manual input on the second time.

I have used facebook autocomplete plug-in. Please find my JS Fiddle Demo I have a problem once entered the text on the autocomplete and hit enter key to hide the manual input on the textbox. It is happening on the the first box but it fails on the second box.

My Demo looks like below

Any help on this..?

Answer 1

You should understand what happens is error line React lib contains DOMChildrenOperations.js and here is function

function removeChild(parentNode, childNode) {
  if (Array.isArray(childNode)) {
    var closingComment = childNode[1];
    childNode = childNode[0];
    removeDelimitedText(parentNode, childNode, closingComment);
    parentNode.removeChild(closingComment);
  }
  parentNode.removeChild(childNode);
}

The reason in your case is that mockup is different at initial state and while React try to update your DOM, because of 3th party DOM manipulate library. For me the same error occurred because childNode in my case was 2 dome nodes for fix this I just added one more div like parent for my element which was edited by 3th party library