为什么不起作用？

Question

我正在尝试删除div，我在控制台中收到此错误。 div正在创建，即使我去检查元素它在那里，它正在将div名称传递给remove函数。

＆＃13;

function removeRow(input) {
		//$("#".input).remove();
    var d = document.getElementById("parentDiv");
var d_nested = document.getElementById(input);
var throwawayNode = d.removeChild(d_nested);
  }

＆＃13;

<div id="parentDiv">

    <div id="div2" class="row">
        <label>
            the first element
            <label>
                <a onclick="removeRow(div2)" style="float:right" title="Remove Drug">X  </a>
            </label>
        </label>
    </div>
    <div id="div3" class="row">
        <label>
            the Second element
            <label>
                <a onclick="removeRow(div3)" style="float:right" title="Remove Drug">X  </a>
            </label>
        </label>
    </div>
</div>

＆＃13;

点击x后我在控制台中出现此错误 TypeError：Node.removeChild的参数1不是对象。

Answer 1

为什么不起作用？

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

小例子

<html>
    <head>
        <script>
            function removeRow(input){
                var d = document.getElementById("parentDiv");
                var d_nested = document.getElementById(input); //getElementById() expectes as string as parameter, not an undefined
                var throwawayNode = d.removeChild(d_nested);
            }
        </script>
    </head>

    <body>
        <div id = 'parentDiv'>
            <div id = 'div2'>
                <a onclick = "removeRow('div2')">X  </a>
            </div>
            <div id = 'div3'>
                <a onclick = "removeRow('div3')">Y  </a>
            </div>
        </div>
    </body>
</html>

的改进

分割标记和功能是一种很好的做法。此外，我们可以跳过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>

TypeError：Node.removeChild的参数1不是对象。删除一个div

1 个答案:

为什么不起作用？

小例子

的改进