Home > Article > Web Front-end > How to delete a line in javascript

How to delete a line in javascript

醉折花枝作酒筹Original: 2021-07-20 10:21:567030browse

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.

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>

[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!

JavaScript jquery 对象事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Which is easier, java or javascript?Next article：Which is easier, java or javascript?

See more

How to delete a line in javascript

Related articles