從頁面刪除對象

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"), 
]) 

刪除方法必須從頁面中刪除元素，當我調用它。應該如何刪除（）方法看起來像，使這項工作

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

所有時間我遺漏的類型錯誤：無法讀取屬性

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>