Javascript TypeError:Node.removeChild的参数1不是对象。在删除div时_Javascript

Javascript TypeError:Node.removeChild的参数1不是对象。在删除div时

javascript

Javascript TypeError:Node.removeChild的参数1不是对象。在删除div时,javascript,Javascript,我试图删除一个div，我在控制台中遇到了这个错误。div创建得很好，即使当我去检查元素时，它也在那里，并将div名称传递给remove函数函数删除程序（输入）{ //$（“#”.input）.remove（）； var d=document.getElementById（“parentDiv”）； var d_nested=document.getElementById（输入）； var throwayNode=d.removeChild（d_嵌套）； } 第一要素 X 第二个要素 X 为

我试图删除一个div，我在控制台中遇到了这个错误。div创建得很好，即使当我去检查元素时，它也在那里，并将div名称传递给remove函数

函数删除程序（输入）{
//$（“#”.input）.remove（）；
var d=document.getElementById（“parentDiv”）；
var d_nested=document.getElementById（输入）；
var throwayNode=d.removeChild（d_嵌套）；
}


第一要素
X
第二个要素
X

为什么它不起作用？

您需要在removeRow（'div2'）中传递一个字符串，以使getElementById（输入）成功

小例子


函数（输入）{
var d=document.getElementById（“parentDiv”）；
var d_nested=document.getElementById（输入）；//getElementById（）应作为字符串作为参数，而不是未定义的
var throwayNode=d.removeChild（d_嵌套）；
}
X
Y

改进分割标记和功能是一种很好的做法。此外，我们可以跳过id的传递，使其更具消耗性

在本例中，我们通过一个类标识所有链接，并通过另一个类标识希望删除的所有容器。就像这样，我们在它们之间的dom级别上是独立的

<html>
    <head>
        <script>
            //We are assigning the javascript function to the html
            //For this we assigned a class to all elements (anyClass) to find those more efficiently.
            function Init(){
                //We are getting all anyClass elements
                var tL = document.querySelectorAll('.anyClass');

                //We assign the remove event for all of them and instead of the string id we pass the element itself (=this)
                for(var i=0, j=tL.length; i<j; i++)
                    tL[i].onclick = function(){
                        removeRow(this)
                    }
            }

            //input:=element and not string id anymore
            function removeRow(input){
                //Now we are getting the parent for the input element, marked as anyRow so we do not rely on fixed dom structure
                //Furthermore we do not need to retrieve parentDiv anymore
                var tP = function getParent(e){return (e.className.indexOf('anyRow') !== -1 || !e.parentNode) ? e : getParent(e.parentNode)}(input);

                if (tP) tP.parentNode.removeChild(tP)
            }
        </script>
    </head>

    <body onload = 'Init()'>
        <div id = 'parentDiv'>
            <div id = 'div2' class = 'anyRow'><a class = 'anyClass'>X</a></div>
            <div id = 'div3' class = 'anyRow'><a class = 'anyClass'>Y</a></div>
            <div id = 'div4' class = 'anyRow'><a class = 'anyClass'>Z</a></div>
        </div>
    </body>
</html>


//我们正在将javascript函数分配给html
//为此，我们为所有元素（anyClass）分配了一个类，以便更有效地查找这些元素。
函数Init（）{
//我们得到了所有的anyClass元素
var tL=document.querySelectorAll（'.anyClass'）；
//我们为所有元素分配remove事件，并传递元素本身（=this），而不是字符串id
对于（var i=0，j=tL.length；i您需要在removeRow（'div2'）中传递一个字符串以使getElementById（）成为successfull.yep，您正在传递一个不存在的变量，而不是字符串值'div2'
。虽然这解决了问题，但它并没有为答案提供一个有效的解决方案。您应该指出内联事件不是一个好的做法，并且不要向事件引入静态字符串。使用本机DOM属性this这将提供一个更具活力的方法。一个答案只会纠正错误。一个伟大的答案不仅可以教授良好的实践。
<html>
    <head>
        <script>
            //We are assigning the javascript function to the html
            //For this we assigned a class to all elements (anyClass) to find those more efficiently.
            function Init(){
                //We are getting all anyClass elements
                var tL = document.querySelectorAll('.anyClass');

                //We assign the remove event for all of them and instead of the string id we pass the element itself (=this)
                for(var i=0, j=tL.length; i<j; i++)
                    tL[i].onclick = function(){
                        removeRow(this)
                    }
            }

            //input:=element and not string id anymore
            function removeRow(input){
                //Now we are getting the parent for the input element, marked as anyRow so we do not rely on fixed dom structure
                //Furthermore we do not need to retrieve parentDiv anymore
                var tP = function getParent(e){return (e.className.indexOf('anyRow') !== -1 || !e.parentNode) ? e : getParent(e.parentNode)}(input);

                if (tP) tP.parentNode.removeChild(tP)
            }
        </script>
    </head>

    <body onload = 'Init()'>
        <div id = 'parentDiv'>
            <div id = 'div2' class = 'anyRow'><a class = 'anyClass'>X</a></div>
            <div id = 'div3' class = 'anyRow'><a class = 'anyClass'>Y</a></div>
            <div id = 'div4' class = 'anyRow'><a class = 'anyClass'>Z</a></div>
        </div>
    </body>
</html>