无法在“节点”上执行“removeChild”

Question

我正在使用http://alexgorbatchev.com/SyntaxHighlighter/ 突出显示我网站上的代码，但有时在我的日志中我会收到这样的 Javascript 错误：

未捕获的 NotFoundError：无法在“节点”上执行“removeChild”：要删除的节点不再是该节点的子节点。也许它是在“模糊”事件处理程序中移动的？

未捕获的 NotFoundError：尝试在不存在的上下文中引用节点。

// set up handler for lost focus
attachEvent(textarea, 'blur', function(e)
{
   textarea.parentNode.removeChild(textarea);
   removeClass(highlighterDiv, 'source');
});

这里是 attachEvent() 函数代码：

function attachEvent(obj, type, func, scope)
{
    function handler(e)
    {
        e = e || window.event;
        
        if (!e.target)
        {
            e.target = e.srcElement;
            e.preventDefault = function()
            {
                this.returnValue = false;
            };
        }
            
        func.call(scope || window, e);
    };
    
    if (obj.attachEvent) 
    {
        obj.attachEvent('on' + type, handler);
    }
    else 
    {
        obj.addEventListener(type, handler, false);
    }
};

谁能帮忙解决这个问题？

Answer 1

我不得不处理同样的问题，而答案令人困惑且违反直觉。嗯，它有它的逻辑，但会导致不平凡的行为。

本质上，当一个节点从 DOM 树中移除时，它会触发一个 blur 事件（也在 focusout 事件之前）。

所以，当您调用removeChild 时，blur 事件会再次触发，但这一次textarea 仍然 定义了parentNode，但是textarea 不再是其父母的孩子！ （是的，读两遍。或者更多。）

虽然 Firefox 使用 planned to do the same 已经有一段时间了，但目前 Chrome 会出现这种情况。

作为一种解决方法，您可以删除附加的事件侦听器：

var onblur = function(e) {
    detachEvent(textarea, 'blur', onblur);
    textarea.parentNode.removeChild(textarea);
    removeClass(highlighterDiv, 'source');
};
attachEvent(textarea, 'blur', onblur);

我假设您有一些 detachEvent 函数来删除事件侦听器。根据您的需要调整代码。

或者，您可以在侦听器函数中的 textarea 上设置一个标志（如属性、属性或更好的作用域变量），并在继续删除节点之前检查它：

var removed = false;
attachEvent(textarea, 'blur', function(e) {
    if (removed) return;
    removed = true;
    textarea.parentNode.removeChild(textarea);
    removeClass(highlighterDiv, 'source');
});

您还可以在删除之前检查 textarea 是否实际上是其 parentNode 的子节点，但是这样的测试非常违反直觉（至少对我而言），我不建议这样做，因为害怕将来会改变这种行为。

最后，你总是可以依赖try...catch 声明，但是……呃。

2016 年更新

当然，使用 jQuery 之类的框架可以为您节省大量使用 one 附加事件侦听器的工作，但此功能也将出现在 standard addEventListener 中：

textarea.addEventListener('blur', handler, { once: true });

Answer 2

虽然这个问题的经典答案是它是 JS 代码中的错误，但在 React 16 中存在一个主要错误，这意味着任何修改 DOM 的浏览器/扩展机制都会破坏 React。

谷歌浏览器内置的翻译功能是最常见的罪魁祸首。

GitHub 问题：https://github.com/facebook/react/issues/11538

最小大小写：https://p93xxmr0rq.codesandbox.io/（只需在 Chrome 中手动右键单击“翻译为”并从日语中选择然后单击按钮）

解决方法：How to disable google translate from html in chrome

<meta name="google" content="notranslate">

Answer 3

我在这里冒着风险，假设你们中的一些人在这里找到了这个问题，因为你用谷歌搜索了上面引用的错误：

'Node' 上的'removeChild'：要移除的节点不再是子节点 这个节点的。也许它是在“模糊”事件处理程序中移动的？

我正在使用 jQuery & DataTables 1.10.6，这个错误确实出现在我正在更新单元格值的 blur() 事件中。我的解决方案是在事件中添加一个条件，如下所示：

var blur = false;
$('table').on('blur', 'td select', function() {
    if (!blur) {
        blur = true;
        var cell = $(this).closest('td');
        table.cell(cell).data('example data');
        blur = false;
    }
});

如果没有更好的解决方案，我会感到非常惊讶，但希望这对某人有所帮助，并可能获得一些建设性的 cmets。

Answer 4

尝试使用谷歌浏览器翻译您的网站（右键单击该网站并选择“翻译成英语”。如果您在控制台中看到错误发生，那么您知道这是由谷歌翻译引起的。

相关 GitHub 问题：https://github.com/facebook/react/issues/11538。

---

Dan Abramov 的解决方法：

if (typeof Node === 'function' && Node.prototype) {
  const originalRemoveChild = Node.prototype.removeChild;
  Node.prototype.removeChild = function(child) {
    if (child.parentNode !== this) {
      if (console) {
        console.error('Cannot remove a child from a different parent', child, this);
      }
      return child;
    }
    return originalRemoveChild.apply(this, arguments);
  }

  const originalInsertBefore = Node.prototype.insertBefore;
  Node.prototype.insertBefore = function(newNode, referenceNode) {
    if (referenceNode && referenceNode.parentNode !== this) {
      if (console) {
        console.error('Cannot insert before a reference node from a different parent', referenceNode, this);
      }
      return newNode;
    }
    return originalInsertBefore.apply(this, arguments);
  }
}

在呈现您的应用之前运行此代码。请记住，这会对性能造成轻微影响。

---

Shuhei Kagawa 的解决方法

在<span> 中呈现文本。

// Case 1
<div>
  {condition && 'Welcome'}
  <span>Something</span>
</div>

// A workaround for case 1
<div>
  {condition && <span>Welcome</span>}
  <span>Something</span>
</div>

// Case 2
<div>
  {condition && <span>Something</span>}
  Welcome
</div>

// A workaround for case 2
<div>
  {condition && <span>Something</span>}
  <span>Welcome</span>
</div>

详细的解释可以在这里找到： https://github.com/facebook/react/issues/11538#issuecomment-390386520

Answer 5

我使用时间延迟，它对我来说就像这样。

// 设置失去焦点的处理程序 附加事件（文本区域，“模糊”，函数（e） { 设置超时（函数（）{ textarea.parentNode.removeChild(textarea); removeClass(highlighterDiv, 'source'); }, 0); });

Answer 6

您可以使用textarea.parentNode.innerHTML = '' 或类似的东西来代替textarea.parentNode.removeChild(textarea);，具体取决于您的上下文。

Answer 7

我遇到了这个错误，上面没有任何帮助，最终我得到了简单的结果：

if (img.parentNode) {
    body.removeChild(img);
}

这对我来说非常适合。

Answer 8

我在一个简单的 jQuery 脚本中发现了相同的错误消息。 当我尝试获取元素 $('#element').height() 的高度时，我在控制台上看到了同样的错误。

元素存在且 $('#element').length 为 1。

带有console.log( $('#element') ) 的元素的日志就像一个jQuery对象，但有很多方法重复。

经过大量调试后，我发现添加 $(document).on('DOMContentLoaded DOMNodeInserted') 事件处理程序会使 jQuery 对象变得奇怪。

希望这对某人有所帮助，因为它很难找到。

Answer 9

从程序触发的事件类型可能与 Dom 的默认操作不同。如果您检查类型，并使用 if (type === 'typeYouWant') 作为保护子句，您可能会跳过不需要的代码执行。控制台记录事件以检查是否有可以隔离的“类型”。

   formEditEl.addEventListener('blur', this._cancelEdit.bind(this));

  _cancelEdit(e) {
    if (e.type === "change") document.querySelector('.form__edit').remove();
    };

Answer 10

您需要在每次执行该方法时检查该元素是否是给定父元素的子元素。

if(box.parentElement === parentBox) {
    parentBox.removeChild(box);
}

Answer 11

为什么不使用 jquery：

$("#element_id").remove();