admin管理员组

文章数量:1435859

I am having a hard time to figure out the solution. I have created two buttons in HTML. One to add table and the other to remove table. The corresponding onclick functions for the buttons are written in the <script> tags. Now onclicking the Add Table button, the table would be created. And on clicking the Remove Table button the above created table should be deleted. I haven't figured out how to remove the created table. Please help me out in the solution to remove the created table. Below is the code for the following.

HTML CONTENT:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
    <button type="button" onclick="addTable()">Add Table</button>
    <button type="button" onclick="removeTable()">Remove Table</button>
  </body>
</html>

JAVASCRIPT CONTENT:

<script language="javascript" type="text/javascript">
 function addTable() {
   var x = document.createElement("table");
   x.id = "table1";
   document.appendChild(x);

   var y = document.createElement("tr");
   x.appendChild(y);

   var z = document.createElement("th");
   z.innerHTML = "FirstName";
   y.appendChild(z);

   var a = document.createElement("tr");
   x.appendChild("a");

   var b = document.createElement("td");
   b.innerHTML("John");
   a.appendChild(b);
 }

 function removeTable() {
   var removeTab = document.getElementById('table1');
   document.removeChild('removeTab');

   // I am not getting the exact syntax to remove the above created table
 }
</script>

I am having a hard time to figure out the solution. I have created two buttons in HTML. One to add table and the other to remove table. The corresponding onclick functions for the buttons are written in the <script> tags. Now onclicking the Add Table button, the table would be created. And on clicking the Remove Table button the above created table should be deleted. I haven't figured out how to remove the created table. Please help me out in the solution to remove the created table. Below is the code for the following.

HTML CONTENT:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
    <button type="button" onclick="addTable()">Add Table</button>
    <button type="button" onclick="removeTable()">Remove Table</button>
  </body>
</html>

JAVASCRIPT CONTENT:

<script language="javascript" type="text/javascript">
 function addTable() {
   var x = document.createElement("table");
   x.id = "table1";
   document.appendChild(x);

   var y = document.createElement("tr");
   x.appendChild(y);

   var z = document.createElement("th");
   z.innerHTML = "FirstName";
   y.appendChild(z);

   var a = document.createElement("tr");
   x.appendChild("a");

   var b = document.createElement("td");
   b.innerHTML("John");
   a.appendChild(b);
 }

 function removeTable() {
   var removeTab = document.getElementById('table1');
   document.removeChild('removeTab');

   // I am not getting the exact syntax to remove the above created table
 }
</script>
  • javascript
  • html
Share Improve this question edited Sep 25, 2015 at 8:37 Alexandr Lazarev 12.9k4 gold badges39 silver badges47 bronze badges asked Sep 25, 2015 at 7:58 John DurnJohn Durn 453 silver badges9 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

You can not directly delete a DOM object. You must delete it via it's parent.

var removeTab = document.getElementById('table1');

var parentEl = removeTab.parentElement;

parentEl.removeChild(removeTab);

Well, in javascript you can't remove directly an element from DOM. You have to go to its parent and remove it from there.

Something like: 

var removeTab = document.getElementById('table1').parentElement.removeChild(removeTab);

本文标签： htmlhow to delete a created table using javascriptStack Overflow

版权声明：本文标题：html - how to delete a created table using javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745673148a2669693.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。