我们可以删除dom表吗

can we remove dom table?

本文关键字：dom 表吗 删除 我们      更新时间：2023-09-26

根据用户的选择，我必须在两个表之间切换。我可以使用表对象模型进行切换，但它有问题，因为我删除了一个表并加载了另一个表，它可以工作，但下次切换回第一个表时，它将无法获得表ID，也无法工作。

在使用像这样的DOM时

var tbl1  = document.createElement("table");
tbl1.setAttribute('id','shorttable');

对于删除，我使用以下java脚本

var b = document.getElementById('shorttable');
document.removeChild(b);

但给了我例外

未捕获错误：NOT_FOUND_ERR:DOM异常

使用DOM有什么方法可以做到这一点吗？

@孤独的一天，谢谢你的回复，但当我从其他功能调用它时，它不起作用？我尝试的是这样的。

  <html>
  <head>
  <title>test dom</title>
  <script>
  function trackmode() 
{
    // i have to delete other table from this function where it is not working  
    var b = document.getElementById('shorttable');
    alert(b);
    b.parentNode.removeChild(b);
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl     = document.createElement("table");
    tbl.setAttribute('id','tracktable');
    var tblBody = document.createElement("tbody");
    // creating all cells
    for (var j = 0; j < 2; j++) {
        // creates a table row
        var row = document.createElement("tr");
        for (var i = 0; i < 2; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            var cellText = document.createTextNode("cell is row "+j+", column "+i);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }
        // add the row to the end of the table body
        tblBody.appendChild(row);
    }
    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}

function shortenmode() 
{
     var b = document.getElementById('tracktable');
b.parentNode.removeChild(b);
    var body1 = document.getElementsByTagName("body")[0];
    // creates a <table> element and a <tbody> element
    var tbl1  = document.createElement("table");
    tbl1.setAttribute('id','shorttable');
    var tblBody1 = document.createElement("tbody");
    // creating all cells
    for (var j = 0; j < 2; j++) {
        // creates a table row
        var row = document.createElement("tr");
        for (var i = 0; i < 2; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            var cellText = document.createTextNode("cell is row "+j+", column "+i);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }
        // add the row to the end of the table body
        tblBody1.appendChild(row);
    }
    // put the <tbody> in the <table>
    tbl1.appendChild(tblBody1);
    // appends <table> into <body>
    body1.appendChild(tbl1);
    // sets the border attribute of tbl to 2;
    tbl1.setAttribute("border", "2");
         //here it will work
    //var b = document.getElementById('shorttable');
    //alert(b);
    //b.parentNode.removeChild(b);
    //myP.removeChild(myTextNode);
}

  </script>
  </head>
  <body >
 <button type="button" name="website" onclick=trackmode() > track</button>
 <button type="button" name="website1" onclick=shortenmode() > short </button>
 </body>
</html>

要删除元素，需要将其从父级中删除，而不是从文档中删除。因此：

b.parentNode.removeChild(b);
相关文章：