关于删除div的问题,如何解决?

如何删除div模块

img

<div class="box orders">
            <time>点餐时间:2022-12-01 17:30time>
            <div class="odnr"><a href="#">
                    <h1>纳尔斯西餐厅h1>
                    <h2>大虾沙拉 prawn5 salad+蟹肉沙拉 crab6 salad ...h2>
                a>div>
            <div class="odcz">金额:<strong>100.00元strong><a href="#" id="del">删除a><a href="gou.html" id="zifu">¥
                    支付a>
            div>
        div>

这部分有个大的div嵌套三段上面的代码,这是个订餐系统,我不会删除这里的div,所以希望能得到帮助

用JQ的写法:

$('#del').click(function(){
  $(this).parent().parent().remove();
})

你这个 按道理 是 数组渲染出来的,你绑定个点击事件 传当前点击的id 。然后 对数据 过滤 一下就行。 数据驱动。

实际项目中的话,给删除按钮绑定事件,会发送请求到后端,后端会删除相对应的数据,前端渲染后就没了。
如果是静态,单纯练习的话,就如下

<div class="box orders">
  <time>点餐时间:2022-12-01 17:30time>
            <div class="odnr"><a href="#">
                    <h1>纳尔斯西餐厅h1>
                    <h2>大虾沙拉 prawn5 salad+蟹肉沙拉 crab6 salad ...h2>
                a>div>
            <div class="odcz">金额:<strong>100.00元strong><a href="#" id="del" class="del">删除</a><a href="gou.html" id="zifu">¥
                    支付a>
            div>
</div>
...
<script>
    let btn = document.querySelector('.del')
    let box = document.querySelector('.box ')

    btn.addEventListener('click', () => {
        box .style.display = 'none'
    })

</script>

不要用a标签来做删除按钮