HTML removeChild() 引发未知异常

Question

下面的函数removelink(id) 似乎经常出现错误，该函数在将项目添加到列表后调用，具有onclick="" 行为。每次调用函数都会抛出异常：

"NotFoundError: 无法在 'Node' 上执行 removeChild': 要执行的节点 被移除的不是这个节点的子节点。”

我知道，通常该错误会给出答案。但是，我仔细检查了removeChild() 在正确的父 div 和正确的孩子中调用。但是，它直接导致错误。

我对 JS 非常缺乏经验。任何帮助表示赞赏。

function removelink(id) {
    var itemname = 'item' + id;
    if(confirm("Are you sure you want to remove this item from the list?" + itemname) == true) {
        try {
            CKEDITOR.remove('leditor'+ id);
            document.getElementById('listeditor').removeChild(document.getElementById(itemname));
            x--;
            limit++;
            document.getElementById("btnadditem") = '+ Add an item('+limit+') ';
            renumber();
            event.preventDefault();
        }
        catch(i) {
            alert("Error Thrown: " + i);
            return false;
        }
    }
    return false;
}

/*
*(Purpose: Creates a new item based on the numbering of var x, an int starting at 0, and initiates the textbox + drawing)
*/

function addNewItem() {
    if(limit >= 1){
        var divcode = document.createElement();

        divcode.innerHTML = '<div id="item'+ x +'"><div class="input-group"><span id="itemNumid'+ x +'" class="input-group-addon">'+ x +'</span><input type="email" class="form-control" name="header'+ x +'" placeholder="Item header"s tyle="border-bottom:none;" ><span class="input-group-addon" style="padding: 0px 0px;" ><button  class="btn btn-danger btn-xs" id="btnremove'+x+'" onclick="removelink('+x+'); return false;" style="height: 41px; width: 41px;" >&#10006</button></span></div><textarea  name="editor'+ x +'" id="leditor'+ x +'"  class="form-control ckeditor" rows="8" style="resize:none;border-top:none;" placeholder="Item Content"></textarea><hr /></div>';

        document.getElementById("listeditor").appendChild(divcode); 

        //CKEDITOR.inline( document.getElementById( 'editable' ) )
        CKEDITOR.replace('leditor'+ x);
        //createEditor(x);
        //$( 'textarea#leditor' + x ).ckeditor();
        //document.getElementById('leditor' + x).className += " ckeditor"
        x++;
        limit--;
        if(limit != 0) {
            document.getElementById("btnadditem").innerHTML = " + Add an item("+limit+") ";
        }
        else {
            document.getElementById("btnadditem").innerHTML = "Limit Reached";
            document.getElementById("btnadditem").className += "disabled";
        }
    }
    return false;
}

在 HTML 中，我有一个加载的 <div id ="listeditor">，其中包含 ID 为 item1、item2、item3 等的 divs...

在那些divs 里面还有divs 来组织代码的显示。

Answer 1

将删除子元素的行替换为：

var itemNode = document.getElementById(itemname);
itemNode.parentNode.removeChild(itemNode);

您的代码中的另一个问题是：

document.getElementById("btnadditem") = '+ Add an item('+limit+') ';

您不能用字符串覆盖 html 节点，您可能想要这样做：

document.getElementById("btnadditem").innerHTML = '+ Add an item('+limit+') ';