为啥我一点删除删除就删除好几个呢，我只想删除一个（我承认我的代码不咋地，我是新手谢谢了）

维护员菜gou一枚 2023-10-11 20:36:45


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
    </style>
</head>
<body>

    <!-- 一。定义body里的元素，form》input   -->



    <!-- 定义form里的class为info -->
      <form autocomplete="off" class="info">
    <!-- 定义input的class，方便接下来的调用 -->
    <input type="text" placeholder="姓名" class="uname">
    <input type="text" placeholder="年龄" class="uage">
    <input type="text" placeholder="薪资" class="usalary">
    <!-- 定义select的class，方便接下来的调用 -->
        <select name="usex" id="" class="usex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <select name="ucity" id="" class="ucity">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
        </select>
        <!-- 定义按钮，方便接下来添加arr -->
        <button class="add" type="">添加</button>
      </form>
    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>薪资</td>
                <td>就业城市</td>
               
            </tr>
        </thead>
        <tbody>
         
        </tbody>
    </table>
    <script>
        /* 选择body中的一些元素 */
        let tbody=document.querySelector("tbody");
        let arr=[];
        
        
        let info=document.querySelector(".info");
        
        let uname=document.querySelector(".uname");
        let uage=document.querySelector(".uage");
        let usalary=document.querySelector(".usalary");
        let usex=document.querySelector(".usex");
        
        let ucity=document.querySelector(".ucity");
        /* 定义全局变量，存储本地数据和读取本地数据。 */
        let setlocalstorage;
        let getlocalstorage;
        /* 监听form 和子元素input ，监控项为submit*/
        info.addEventListener("submit",function(e){
            /* 阻止默认的跳转动作 */
            e.preventDefault();
            /* 不允许输入空元素 ！这个需要调试，输入完了还是把空的内容添加到了arr里 */
            if(!uname.value || !uage.value || !usalary.value){
                alert(`no!`);
                /* 重置info里的表格。 */
                render();
                    this.reset();
                
            };
        
           
                
             /* 向arr数组添加元素 */
             arr.push({id:arr.length+1,name:uname.value,age:uage.value,sex:usex.value,salary:usalary.value,city:ucity.value});
            //  arr.pop();
            /* 将arr数组的内容存储到 本地，格式为字符串*/
             setlocalstorage=localStorage.setItem("arr",JSON.stringify(arr));
             /* 读取本地存储的arr，格式为对象 */
        getlocalstorage=JSON.parse(localStorage.getItem("arr"));
        /* 定义本地功能函数，将读取本地存储的内容，赋值给tbody的内容，让其形成表格。*/
        function render(){
 
let newArr=getlocalstorage.map(function(ele,index){
    return`<tr>
        <td>${ele.id}</td>
        <td>${ele.name}</td>
        <td>${ele.age}</td>
        <td>${ele.sex}</td>
        <td>${ele.salary}</td>
        <td>${ele.city}</td>
        <td><button class="add" type="submit" data-id="${index}">删除</button><td>
        

    </tr>`
})
 
tbody.innerHTML=newArr.join("");
 
}
/* 调用函数，否则函数不运行。 */
render();
/* 重置info项（输入项） */
        // this.reset();


        // tbody继承的调用 ，还是需要排查故障，因为点一个删两个·····
        tbody.addEventListener("click",function(e){
        
         if(e.target.tagName==="BUTTON"){
         
         console.log(e.target.dataset.id);
        arr.splice(e.target.dataset.id,1);
        // //  console.log(arr);
         localStorage.setItem("arr",JSON.stringify(arr)); 
         getlocalstorage=JSON.parse(localStorage.getItem("arr"));
     render(); 

         
         }
       
    
     
    })
        })
    
    
    
      
       
  
       
        
        
    
    
    
 
     
    </script>
</body>
</html>

...全文