Question

我正在尝试构建一个灵活的系统，如果数据模型发生更改，该系统会自动更新所有子项。

Label: function(parent, dataWrapper) {

    if (!(dataWrapper instanceof Ui.Wrapper.LabelData))
        throw new Error("Data element is not a instance of Ui.Wrapper.LabelData"); 

    const htmlElement = document.createElement("div");
    const self = this;

    this.update = function() {
        htmlElement.innerText = dataWrapper.label();            
    };
    this.delete = function() {
        parent.removeChild(htmlElement);
    };

    this.update();
    parent.appendChild(htmlElement);
},

...

const tasks = [];
const htmlNode = document.getElementById("wrapper");

const buttonAdd = new Ui.Static.Button(document.getElementById("buttons"), "Add", function() {
    
    ...

    uiLabelElement = new Ui.Label(htmlNode, dataWrapper);
    tasks.push(task);
    ...
});

const buttonRemove = new Ui.Static.Button(document.getElementById("buttons"), "Remove", function() {
    if (tasks.length < 1) return;
    tasks[tasks.length - 1].delete();
    tasks.splice(tasks.length - 2, 1);
});

上面显示的脚本向DOM添加了两个按钮。单击添加将Ui.Label实例添加到DOM。单击删除将删除DOM中的最后一个元素。

添加实例可以按预期工作，但是通过调用elem.delete()删除实例只会删除最后添加的元素。对于任何其他元素，将引发DOMException（Node.removeChild：要删除的节点不是该节点的子节点）。

DEMO

在标签内，htmlElement.parentNode正在重用null。 parent仍然是对实际父级的有效引用，但不包含htmlElement。

父节点不再包含实例的原因是什么？

Javascript父节点不包含子节点

0 个答案: