javascript - ejemplos - Error al ejecutar ''removeChild'' en ''Node''

javascript html

Question

Estoy usando http://alexgorbatchev.com/SyntaxHighlighter/ para resaltar el código en mi sitio web, pero a veces en mi log estoy recibiendo errores de Javascript como este:

NotFoundError no detectado: no se pudo ejecutar ''removeChild'' en ''Node'': el nodo que se va a eliminar ya no es un elemento secundario de este nodo. ¿Quizás fue movido en un manejador de eventos ''borroso''?

NotFoundError no capturado: se intentó hacer referencia a un nodo en un contexto en el que no existe.

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

Aquí está el código de función 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);
    }
};

¿Alguien puede ayudar a solucionar esto?

Answer 1

¿Por qué no usas jquery?

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

Answer 2

En lugar de textarea.parentNode.removeChild(textarea); Puede usar textarea.parentNode.innerHTML = '''' o algo similar, según su contexto.

Answer 3

Encontré el mismo mensaje de error en un script jQuery simple. Cuando traté de obtener la altura de un elemento $ (''# element''). Height () vi el mismo error en la consola.

El elemento existe y $ (''# element''). Length era 1.

El registro del elemento con console.log ($ (''# element'')) era como un objeto jQuery pero con muchos métodos repetidos.

Después de una gran cantidad de depuración, encontré que agregar un controlador de eventos $ (document) .on (''DOMContentLoaded DOMNodeInserted'') hizo esta cosa extraña a los objetos jQuery.

Espero que esto ayude a alguien a causar Es difícil de encontrar.

Answer 4

Mientras que la respuesta clásica para esta pregunta es que es un error en el código JS, con React 16 hay un error importante que significa que cualquier navegador / mecanismo de extensión que modifique el DOM rompe React.

La funcionalidad de traducción incorporada de Google Chrome es el culpable más común.

Problema de GitHub: https://github.com/facebook/react/issues/11538

Caso mínimo: https://p93xxmr0rq.codesandbox.io/ (solo haga clic derecho en "Traducir a" en Chrome y seleccione desde japonés y luego haga clic en el botón)

Solución alternativa: cómo deshabilitar la traducción de google desde html en cromo

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

Answer 5

Recibí este error y nada desde arriba me ayudó, finalmente terminé con simple:

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

que funciona perfectamente para mi

Answer 6

Tuve que lidiar con el mismo problema, y ​​la respuesta es confusa y contra intuitiva. Bueno, tiene su lógica, pero conduce a comportamientos no triviales.

Básicamente, cuando se elimina un nodo del árbol DOM, se focusout un evento de blur (y antes de un evento de focusout también).

Entonces, cuando llamas a removeChild , el evento blur removeChild nuevamente , pero esta vez textarea todavía tiene su parentNode definido, ¡pero textarea ya no está entre los hijos de sus padres! (Sí, lea esto dos veces. O más).

Esto sucede en Chrome por ahora, aunque Firefox ha planeado hacer lo mismo por bastante tiempo.

Como solución alternativa, puede eliminar el detector de eventos que adjuntó:

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

Supongo que tienes alguna función detachEvent para eliminar los detectores de eventos. Ajusta el código a tus necesidades.

Alternativamente, puede establecer un indicador (como una propiedad, o un atributo, o mejor una variable de ámbito) en el área de texto en la función de escucha, y verificarlo antes de proceder con la eliminación del nodo:

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

También puedes verificar si textarea es realmente un nodo hijo de parentNode antes de eliminarlo, pero tal prueba es tan contra-intuitiva (al menos para mí) que no recomendaría hacer eso, con el temor de que este comportamiento se modifique en el futuro.

Finalmente, siempre puedes confiar en una declaración try...catch , pero ... ugh.

Actualización 2016

Naturalmente, el uso de un marco como jQuery le ahorrará mucho trabajo al asociar los detectores de eventos con one , pero esta funcionalidad también llegará al addEventListener estándar :

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

Answer 7

Uso el retraso de tiempo y me funciona así.

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

Answer 8

Voy a dar un paso aquí y supongo que algunos de ustedes que encuentran esta pregunta están aquí porque buscaron en Google el error citado anteriormente:

''removeChild'' en ''Node'': el nodo que se eliminará ya no es un elemento secundario de este nodo. ¿Quizás fue movido en un manejador de eventos ''borroso''?

Estoy usando jQuery & DataTables 1.10.6 y este error efectivamente surgió en un evento blur() donde estaba actualizando el valor de la celda. La solución para mí fue agregar una condición dentro del evento como esta:

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;
    }
});

Me sorprendería mucho que no hubiera una solución mucho mejor, pero espero que esto ayude a alguien y tal vez obtenga algunos comentarios constructivos.

Answer 9

necesita verificar cada vez que se ejecuta el método si el elemento es hijo del padre dado.

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