javascript - 动态删除 DOM 表中的行

Question

我在下面的循环中使用removeChild函数时遇到了问题，并且无法真正找到好的例子？我的代码有什么问题吗？

    var univArray = new Array(
    {name: "Stanford University", nick: "Stanford", ownership: "private", sys: "n/a", SATh: 1550, SATl: 1360, tuition: 27204, room: 8680},
    {name: "University of California, Berkeley", nick: "UC Berkeley", ownership: "public", sys: "University of California", SATh: 1440, SATl: 1170, tuition: 4200, room: 10608},
    {name: "University of California, Santa Cruz", nick: "UC Santa Cruz", ownership: "public", sys: "University of California", SATh: 1270, SATl: 1030, tuition: 4384, room: 9708},
    {name: "San Francisco State University", nick: "SFSU", ownership: "public", sys: "CalState", SATh: 1120, SATl: 850, tuition: 1826, room: 6736},
    {name: "San Jose State University", nick: "SJSU", ownership: "public", sys: "CalState", SATh: 1140, SATl: 860, tuition: 1912, room: 7395},
    {name: "Sonoma State University", nick: "Sonoma State", ownership: "public", sys: "CalState", SATh: 1140, SATl: 930, tuition: 2226, room: 9606},
    {name: "California State University, Hayward", nick: "CalState Hayward", ownership: "public", sys: "CalState", SATh: 1050, SATl: 810, tuition: 1800, room: 6435},
    {name: "University of San Francisco", nick: "USF", ownership: "private", sys: "Roman Catholic", SATh: 1240, SATl: 1030, tuition: 21780, room: 9080},
    {name: "Santa Clara University", nick: "SCU", ownership: "private", sys: "Roman Catholic", SATh: 1300, SATl: 1110, tuition: 23445, room: 8904},
    {name: "Mills College", nick: "Mills College", ownership: "private", sys: "n/a", SATh: 1130, SATl: 920, tuition: 19482, room: 7832}
    );

    var table = document.createElement("table")
    document.body.appendChild(table)
    table.setAttribute("id", "tableid")
    var tbody = document.createElement("tbody")
    table.appendChild(tbody)
    var row = document.createElement("tr")
    tbody.appendChild(row)
    header =document.createElement("th")
    row.appendChild(header)
    header.appendChild(document.createTextNode("Name"))
    header =document.createElement("th")
    row.appendChild(header)
    header.appendChild(document.createTextNode("Sat High"))
    header =document.createElement("th")
    row.appendChild(header)
    header.appendChild(document.createTextNode("Sat Low"))
    header =document.createElement("th")
    row.appendChild(header)
    header.appendChild(document.createTextNode("Tuition"))
    header =document.createElement("th")
    row.appendChild(header)
    header.appendChild(document.createTextNode("Room and Board"))

        for (var i = 0; i < univArray.length; i++) {
            var tbody = document.createElement("tbody")
            table.appendChild(tbody)
            var row = document.createElement("tr")
            tbody.appendChild(row)

            cell = document.createElement("td")
            row.appendChild(cell)
            cell.appendChild(document.createTextNode(univArray[i].name))
            cell = document.createElement("td")
            row.appendChild(cell)
            cell.appendChild(document.createTextNode(univArray[i].SATh))
            cell = document.createElement("td")
            row.appendChild(cell)
            cell.appendChild(document.createTextNode(univArray[i].SATl))
            cell = document.createElement("td")
            row.appendChild(cell)
            cell.appendChild(document.createTextNode(univArray[i].tuition))
            cell = document.createElement("td")
            row.appendChild(cell)
            cell.appendChild(document.createTextNode(univArray[i].room))
        }

    function filter(){
        if (document.getElementById("public").checked) {
            var nodes = document.body.getElementsByTagName('tr')
            for (var z = 0; z < univArray.length; z++) {
                var node = nodes[z];
                if (univArray[z].ownership != "public") {

                    node.parentNode.removeChild(node)
                }
            }
        }
    }



    document.getElementById("update").onclick = filter;

Answer 1

getElementsByTagName 返回一个 NodeList，正如 W3C 所说:“DOM 中的 NodeList 对象是事件的。”。这意味着当您从 DOM 树中删除节点时，它也会从 nodes 列表变量中删除。因此，您始终需要删除列表的第一个元素:

var node = nodes[0];
if (univArray[z].ownership != "public") {
    node.parentNode.removeChild(node)
}