删除脚本在我的模板中没有按预期工作

Question

我有一个 html 页面应该显示用户帐户的博客（所以有一个帐户集群，一个博客集群，

account

有一个

blogs

字段将相关博客存储在一个数组中）并给出用户可以选择从前端删除博客。这是相关代码：

<ul>
    <% for(var x =0; x<account.blogs.length; x++){ %>
        
            <li><a href= "/blogs/<%=account._id%>/<%=account.blogs[x]._id%>"> <%=account.blogs[x].title %></a></li>
                <li><a class="delete<%=x.toString()%>" data-doc="<%=account._id+'/'+account.blogs[x]._id%>"> delete</a> </li>
                <script>
                    
            
                    const trashcan = document.querySelector('a.delete<%=x.toString()%>')
                    trashcan.addEventListener('click',(e)=>{const endpoint = `/my-blogs/${trashcan.dataset.doc}`;
                fetch(endpoint,{method:'DELETE'
            })
            .then((response)=>response.json())
            .then((data)=> window.location.href=data.redirect)
            .catch(err=>{console.log(err)})
                })
                
                </script>
      
        <% } %>
    </ul>

因此，每个博客都有一个指向其自己页面的链接，并且可以通过单击其下方的

delete

文本来删除它。我有两个问题：

1. 只有第一个删除脚本有效。我无法单击其他

   delete

   文本来执行任何操作。我检查了 cloud.mongodb.com 并确认该博客已从博客集群中消失。
2. 博客没有从

   account.blogs

   数组中删除。如果我错了请纠正我，但我的印象是，因为这些都是对象，所以数组中指向 Blog 对象的指针应该变成

   null

   。下面是相关的删除方法：

app.delete('/my-blogs/:idacc/:idblg',(req,res)=>{

                    console.log("In delete my-blogs/id ")
                    const idblg = req.params.idblg;
                    const idacc = req.params.idacc;
                    Account.findById(idacc).then((resultacc)=>{
                    Blog.findByIdAndDelete(idblg)
                    .then(resultblg=>{
                        res.json({redirect: `/my-blogs/${idacc}`})
                    })})
                    .catch(err=>{
                        console.log(err)
                    })

                })

还有，能不能推荐一些好的测试调试工具给我？

Answer 1

问题是客户端JavaScript代码（服务器端代码似乎工作正常，因为它正在删除博客）。您多次分配同一个变量，但失败了。

快速而肮脏的解决方案是向其添加循环索引：

 const trashcan<%=x%> = document.querySelector('a.delete<%=x.toString()%>')
            trashcan<%=x%>.addEventListener('click',(e)=>{const endpoint = `/my-blogs/${trashcan<%=x%>.dataset.doc}`;
        fetch(endpoint,{method:'DELETE'
    })
    .then((response)=>response.json())
    .then((data)=> window.location.href=data.redirect)
    .catch(err=>{console.log(err)})
        })

但这真的很难看。

最好将

onclick

处理程序添加到每个

a

标签，并将该代码移动到一个函数中，该函数将博客数据作为参数，从而从

a

标签中删除额外的属性（还有，您需要添加

event.preventDefault

以防止浏览器访问该链接）。

所以，试试这个：

<script>
function deleteBlog(event, doc) {
  event.preventDefault();
    console.log('delete', doc);
    const endpoint = `/my-blogs/${doc}`;
    fetch(endpoint, {
            method: 'DELETE'
        })
        .then((response) => response.json())
        .then((data) => window.location.href = data.redirect)
        .catch(err => {
            console.log(err)
        });
}
</script>


    <ul>
        <% for(var x =0; x<account.blogs.length; x++){ %>
            
            <li><a href="/blogs/<%=account._id%>/<%=account.blogs[x]._id%>"> <%=account.blogs[x].title %></a></li>

            <li><a class="delete<%=x.toString()%>" onclick="deleteBlog(event,<%=account._id+'/'+account.blogs[x]._id%>)"> delete</a> </li>

            <% } %>
    </ul>