使用js来进行remove不需要的元素

一、使用原生js来操作

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <table align="center">

        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
            <th>操做</th>
        </tr>
        </thead>
        <tbody id="t_body">

        </tbody>
    </table>
</body>
<script>
    //获取tbody的id
    let tbody = document.getElementById("t_body");
    let htm="";
    //添加数据
    for (let i = 0; i < 3; i++) {
      
      
        htm+="<tr id='"+i+"'>" +
            "<td>"+i+"</td>" +
            "<td>user"+i+"</td>" +
            "<td>2"+i+"</td>" +
            "<td>北京"+i+"</td>" +
            "<td><a href='#' οnclick='deleteDa("+i+")'>删除</a></td></tr>"
    }
    //进行赋值
    tbody.innerHTML=htm;
    //编写删除事件
   function deleteDa(id){
      
      
        if (!confirm("你确定要删除id为"+id+" 的数据吗？")){
      
      
            return;
        }
        //确认删除
       //获取当前id
       let delId = document.getElementById(id);
        //移除
       delId.parentNode.removeChild(delId);
    }
</script>
</html>

演示

在这里插入图片描述

二、使用jquery进行remove

引入jquery

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <table align="center">

        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
            <th>操做</th>
        </tr>
        </thead>
        <tbody id="t_body">

        </tbody>
    </table>
</body>
<script>
    let htm="";
    //添加数据
    for (let i = 0; i < 3; i++) {
    
    
        htm+="<tr id='"+i+"'>" +
            "<td>"+i+"</td>" +
            "<td>user"+i+"</td>" +
            "<td>2"+i+"</td>" +
            "<td>北京"+i+"</td>" +
            "<td><a href='#' οnclick='deleteDa("+i+")'>删除</a></td></tr>"
    }
    //为tbody进行赋值
   $("#t_body").html(htm);
    //编写删除事件
   function deleteDa(id){
    
    
        if (!confirm("你确定要删除id为"+id+" 的数据吗？")){
    
    
            return;
        }
        //确认删除
      $("#"+id).remove();
    }
</script>
</html>

使用js来进行remove不需要的元素

一、使用原生js来操作

代码

演示

二、使用jquery进行remove

代码

演示：同上

猜你喜欢