总是无法在“节点”上执行“删除孩子”：参数 1 不是“节点”类型

Question

谁能帮助我如何删除参数1。这是我总是得到的错误：

无法在“节点”上执行“删除孩子”：参数 1 不是“节点”类型

<script src="assets/js/minicart.js"></script>
<script>
    counter = 1;
    $(".apply").click(function () {
        var root_container = document.getElementById("root-container");
        var container = document.createElement('div');
        var name_lists = document.getElementById('food-names');
        var price_lists = document.getElementById('food-prices');
        container.className="form-controll";
        container.id= counter;

        var input_name = document.createElement('input');
        var input_price = document.createElement('input');
        var button = document.createElement('button');
        var br = document.createElement('br')
        var input_total = document.createElement('input')

        container.className="modal-body row ";

        button.className  = "btn btn-danger delete1";
        button.name = "counter";
        button.type = "button";
        button.id = counter;
        button.onclick = "remove";
        button.appendChild(document.createTextNode("X"));
        counter++;

        input_name.value = $("#" + this.name ).html().trim();
        input_name.className = "text-center ";
        input_name.style.border = 'none';
        input_name.name= $("#" + this.name).html().trim();
        input_name.setAttribute("readonly", true)
        name_lists.value = name_lists.value + "=" + $("#" + this.name).html().trim();

        input_price.value = this.id.trim();
        input_price.className = "text-center";
        input_price.style.border = 'none';
        input_price.name=  this.id.trim();
        input_price.setAttribute("readonly", true)
        price_lists.value = price_lists.value + "=" + this.id.trim();

        container.appendChild(input_name);
        container.appendChild(input_price);
        container.appendChild(button);
        container.appendChild(br);

        root_container.appendChild(container);
    });

    $(document).on("click",'.delete1',function(){
        console.log('deleting node number -' + this.id-1);
        counter = -0;

        var root_container = document.getElementById("root-container");

        root_container.removeChild(root_container.childNodes[this.id]);

        for(i=0;i<counter.length;i++){
        }
    });
</script>

Answer 1

我没有浏览所有代码，我看到的是代码

var root_container = document.getElementById("root-container");

root_container.removeChild(root_container.childNodes[this.id]);

在 id 有效且唯一并且您拥有 this.id 之前，此代码很好且可行，我认为问题出在 this.id 中， this.id是什么，我确定问题就在那里，希望对您有所帮助。 快速提示使用 Chrome 调试器工具并在鼠标单击时添加事件侦听器断点（源选项卡 > 右侧导航 > 事件侦听器断点 > 鼠标 > 单击）选中此框。 您的浏览器将在此事件上中断，然后检查 this。 或者，您可以对此进行安慰，但是您可以按照上述方式进行下一步并自己发现问题，希望对您有所帮助