javascript - 从页面中删除对象

Question

如何从页面中删除对象？这是我的 OOP 代码，具有多态性

function Container() {
    this.id = '';
    this.className = '';
    this.htmlCode = '';
}

Container.prototype.remove = function () {
    window.onload = function () {
        var elem = document.getElementById(this.id);
        elem.parentNode.removeChild(elem);
        return elem.id;
    }
}

Container.prototype.render = function () {
    return this.htmlCode;
};

function Menu(myId, myClass, myItems) {
    Container.call(this);
    this.id = myId;
    this.className = myClass;
    this.items = myItems;
}

Menu.prototype = Object.create(Container.prototype);
Menu.prototype.constructor = Menu;

Menu.prototype.render = function () {
    var res = '<ul class="'+this.className+'">';

    for (var item in this.items)
    {
        if(this.items[item] instanceof MenuItem){
            res += this.items[item].render();
        }
    }
    res += '</ul>';
    return res;
};

function MenuItem(myHref, myName) {
    Container.call(this);
    this.className = 'menu-item';
    this.href = myHref;
    this.name = myName;
}

MenuItem.prototype = Object.create(Container.prototype);
MenuItem.prototype.constructor = MenuItem;

MenuItem.prototype.render = function () {
    return '<li><a href="'+this.href+'">'+this.name+'</a></li>';
};


var menu = new Menu('my_menu', 'my_menu', [
    new MenuItem('/', 'Main'),
    new MenuItem('/about/', 'About us'),
    new MenuItem('/contacts', 'Contacts'),
    new MenuItem('/data', "Data"),
])

当我调用它时，删除方法必须从页面中删除元素。 remove() 方法应该如何才能完成这项工作

document.write(menu.render());
document.write(menu.remove());
console.log('ok');

我一直遇到 Uncaught TypeError: Cannot read property

Answer 1

不要使用document.write()。另外，我修复了一些问题:

function Container() {
    this.id = '';
    this.className = '';
    this.htmlCode = '';
}

Container.prototype.remove = function () {
    var elem = document.getElementById(this.id); // just remove the element, don't wait for "window.onload"
    elem.parentNode.removeChild(elem);
}

Container.prototype.render = function () {
    return this.htmlCode;
};

function Menu(myId, myClass, myItems) {
    Container.call(this);
    this.id = myId;
    this.className = myClass;
    this.items = myItems;
}

Menu.prototype = Object.create(Container.prototype);
Menu.prototype.constructor = Menu;

Menu.prototype.render = function () {
    // add the id to the <ul> element!
    var res = '<ul id="'+this.id+'"class="'+this.className+'">';

    for (var item in this.items)
    {
        if(this.items[item] instanceof MenuItem){
            res += this.items[item].render();
        }
    }
    res += '</ul>';
    return res;
};

function MenuItem(myHref, myName) {
    Container.call(this);
    this.className = 'menu-item';
    this.href = myHref;
    this.name = myName;
}

MenuItem.prototype = Object.create(Container.prototype);
MenuItem.prototype.constructor = MenuItem;

MenuItem.prototype.render = function () {
    return '<li><a href="'+this.href+'">'+this.name+'</a></li>';
};


var menu = new Menu('my_menu', 'my_menu', [
    new MenuItem('/', 'Main'),
    new MenuItem('/about/', 'About us'),
    new MenuItem('/contacts', 'Contacts'),
    new MenuItem('/data', "Data"),
]);

var nav = document.querySelector('nav');
document.getElementById('render').addEventListener('click', function () {
    nav.innerHTML = menu.render();
});
document.getElementById('remove').addEventListener('click', function () {
    menu.remove();
});

<nav></nav>
<button id="render">Render</button>
<button id="remove">Remove</button>