Home > Article > Web Front-end > How to delete table table in javascript
Javascript method to delete a table: First use the "document.getElementById()" method to obtain the table element object and its parent element object; then use the "parent element object.removeChild (table element object)" statement to delete Just form.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
Javascript method of deleting a table:
Get the parent element object and table object of the table
Use the remove() method to delete the able table object
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body id="body">
<table border="1" id="table">
<tr>
<th>name</th>
<th>job</th>
</tr>
<tr>
<td>灭绝师太</td>
<td>PHP中文网高级讲师</td>
</tr>
<tr>
<td>欧阳克</td>
<td>PHP中文网讲师</td>
</tr>
<tr>
<td>韦小宝</td>
<td>PHP中文网初级讲师</td>
</tr>
</table>
<p id="demo">点击按钮，删除table表格。</p>
<button onclick="myFunction()">点击按钮</button>
</body>
<script>
function myFunction() {
var body = document.getElementById("body");
var table = document.getElementById("table");
body.removeChild(table);
}
</script>
</html>Rendering:
Description:
The remove() method can be used to delete all elements on the parent node, including all text and child nodes.
Methods to find elements:
1. Get elements based on id
document.getElementById("id属性的值");2. Get elements based on tag names
document.getElementsByTagName("标签的名字");3. Get the element based on the value of the name attribute
document.getElementsByName("name属性的值");4. Get the element based on the class attribute
document.getElementsByClassName("类样式的名字");5. Get the element based on the css path (get one)
document.querySelector("css路径");6. Get elements based on css path (get a group)
document.querySelectorAll("css路径");[Recommended learning: javascript advanced tutorial]
The above is the detailed content of How to delete table table in javascript. For more information, please follow other related articles on the PHP Chinese website!