javascript - 无法从动态创建的表中删除多余的行

我正在尝试使用JS和jQuery动态创建表。 （我知道我可以用html对其进行硬编码，但我不想这样做。）
我在表上有多余的一行，无法删除。
有人可以在我的代码中提供有关如何最好地解决此问题的答案吗？

我的代码发布在下面。

var game = {
    matrix: [],
    startGame: function()
    {
        this.doDomStuff(); //build board
    },
    doDomStuff: function(row, column)
    {
        for(var i = 0; i < 7; i++)
        {
            var row = $('<div>');
            row.attr('id', 'data-row' + (i + 1));
            row.addClass('data-row');
            for(var j = 0; j < 6; j++)
            {
                var column = $('<div>');
                column.attr('id', 'data-column' + (j + 1));
                column.addClass('data-column');
                column.addClass('column');
                row.append(column);
            }
            $('body').prepend(row);
        }
    }
};

最佳答案

如果您正在制作游戏，并且每一行都可以具有自己的逻辑和行为，那么操作数组和DOM结构都将更快。如果您的逻辑更加完善，您会发现性能有所不同。因此，如果确实需要在那里更新对象，请调用DOM结构。例如：

function SuperTable(){
    this.tablerows = [];
    this.DOMObject = $("body");
}

SuperTable.prototype.AddRow = function() {
    this.tablerows[this.tablerows.length] = new SuperRow(this.tablerows.length,this.DOMObject);
}

SuperTable.prototype.RemoveRow = function(rowIndex) {
    this.tablerows[rowIndex].DOMObject.remove(); // remove element from DOM
    this.tablerows.splice(rowIndex,1); // remove element from logic of the game
}

function SuperRow(rownumber,parent) {
    this.DOMObject = $("<div>");
    this.DOMObject.addClass('data-row');
    parent.prepend(this.DOMObject);
}

mytable = new SuperTable()
mytable.AddRow() // create row on 0 position
mytable.RemoveRow(0) // remove row from 0 position

关于javascript - 无法从动态创建的表中删除多余的行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31072745/