How to delete a line in javascript-JS Tutorial-php.cn

How to delete a line in javascript

醉折花枝作酒筹

Release： 2023-01-07 11:44:18

Original

7074 people have browsed it

In JavaScript, you can use the remove function to delete a row, and the syntax format is "element object.remove()". The remove() method removes the selected elements, including all text and child nodes.

How to delete a line in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

javascript adds data to the form in the form, or you can delete a row individually

remove() method removes the selected element, including all text and child nodes.

This method does not delete the matching elements from the jQuery object, so these matching elements can be used again in the future.

But in addition to the element itself being retained, remove() will not retain the jQuery data of the element. Others such as bound events, additional data, etc. will be removed. This is different from detach().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            text-align: center;
        }

        #mytable {
            width: 500px;
            text-align: center;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        #mytable td, #mytable th {
            border: 1px solid #ccc;
        }

        #myfrm {
            line-height: 30px;
        }
    </style>
    <script>
        window.onload = function () {
            $("btnAdd").onclick = function(){
                //创建tr
                let tr = document.createElement(&#39;tr&#39;);
                //创建td
                let tdName = document.createElement(&#39;td&#39;);
                let tdAge = document.createElement(&#39;td&#39;);
                let tdSex = document.createElement(&#39;td&#39;);
                let tdPhone = document.createElement(&#39;td&#39;);
                let tdDelete = document.createElement(&#39;td&#39;);

                //td中放数据
                tdName.innerText = $(&#39;name&#39;).value;
                tdAge.innerText = $(&#39;age&#39;).value;
                tdSex.innerText = $(&#39;m&#39;).checked?$(&#39;m&#39;).value:$(&#39;f&#39;).value;

                tdPhone.innerText = $(&#39;phone&#39;).value;

                //这边如果不添加删除，增加数据之后，会删除不了
                let btndelete = document.createElement(&#39;input&#39;);
                btndelete.type=&#39;button&#39;;
                btndelete.value=&#39;删除&#39;;
                btndelete.onclick = function(){
                    this.parentNode.parentNode.remove();
                }
                tdDelete.appendChild(btndelete);

                //td放入tr;
                tr.appendChild(tdName);
                tr.appendChild(tdAge);
                tr.appendChild(tdSex);
                tr.appendChild(tdPhone);
                tr.appendChild(tdDelete);

                //tr放入表格

                $(&#39;tb&#39;).appendChild(tr);
            }


            //删除
            let btnlist = document.querySelectorAll(&#39;.delete&#39;);
            for(let i = 0;i<btnlist.length;i++){
                btnlist[i].onclick = function () {
                    this.parentNode.parentNode.remove();
                }
            }


        }

        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<p id="container">
    <table id="mytable">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td>tom</td>
            <td>20</td>
            <td>male</td>
            <td>110</td>
            <td>
                <input type="button" value="删除" class="delete">
            </td>
        </tr>
        <tr>
            <td>jack</td>
            <td>22</td>
            <td>male</td>
            <td>119</td>
            <td><input type="button" value="删除" class="delete"></td>
        </tr>
        <tr>
            <td>alice</td>
            <td>25</td>
            <td>female</td>
            <td>120</td>
            <td><input type="button" value="删除" class="delete"></td>
        </tr>
        </tbody>
    </table>
    <hr>

    <form action="" id="myfrm">
        姓名：<input type="text" id="name"> <br>
        年龄：<input type="text" id="age"> <br>
        性别：<input type="radio" name="sex" id="m" value="male" checked> 男
        <input type="radio" name="sex" id="f" value="female"> 女 <br>
        电话：<input type="text" id="phone"> <br>
        <input type="button" value="添    加" id="btnAdd">
        <input type="reset" value="重    置">
    </form>
</p>

</body>
</html>

Copy after login

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to delete a line in javascript. For more information, please follow other related articles on the PHP Chinese website!