账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何在vue里面实现点击一个图片删除它的父级元素和它自身
    • 2020-01-01 00:00
    • 11
    33
    0

    如题
    <template>

    <div id="coniatner">
        <ul>
            <li class="li-1">
                <p>保险箱按此顺序拨号,拖动可排序</p>
                <img @click="del(img)" src="../drawable-xhdpi/Forknumber.png" alt="">
            </li>
            <li class="li-2">
                <div class="bj">
                    <img  src="../drawable-xhdpi/user.png" alt="">
                </div>
                <p>13149869439</p>
            </li>
            <li class="li-3">
                <div class="bj">
                    <img  src="../drawable-xhdpi/user.png" alt="">
                </div>
                <p>13333333333</p>
            </li>
            <li class="li-4">
                <span>49869439</span>
                <div class="del">
                    <p>删除</p>
                </div>
            </li>
        </ul>
    </div>

    </template>

    <script>
    export default {

    name:"coniatner",
    data(){
        return {
            
        }
    },
    methods:{
        
    }

    }
    </script>

    <style>

    *{
        margin:0;
        padding: 0;
    }
    #coniatner{
        width: 7.5rem;
        height: 11.2rem;
    }
    #coniatner ul{
        width: 7.5rem;
        height: 5.5rem;
    }
    #coniatner ul .li-1{
        width: 7.5rem;
        height: 0.82rem;
        background-color: #f7eabd;
    }
    #coniatner ul .li-1 p{
        float: left;
        font-size: 23px;
        margin-left: 0.3rem;
        margin-top: 0.12rem;
    }
    #coniatner ul .li-1 img{
        float: left;
        width: 0.47rem;
        height: 0.47rem;
        margin-left: 1.34rem;
        margin-top: 0.15rem;
    }
    #coniatner ul .li-2{
        width: 7.2rem;
        height: 1.4rem;
        border-bottom: 1px  solid #e6e6e6;
        margin-left: 0.3rem;
    }
    #coniatner ul .li-2 .bj{
        width: 0.9rem;
        height: 0.9rem;
        background-color: #b38eff;
        border-radius: 3px;
        float: left;
        margin-top: 0.3rem;
    }
    #coniatner ul .li-2 img{
       width: 0.57rem;
       height: 0.65rem;
       position: absolute;
       margin-left: 0.15rem;
       margin-top: 0.16rem;
    }
    #coniatner ul .li-2 p{
        float: left;
        font-size: 20px;
        margin-top: 0.5rem;
        margin-left: 0.1rem;
    }
    #coniatner ul .li-3{
        width: 7.2rem;
        height: 1.4rem;
        border-bottom: 1px  solid #e6e6e6;
        margin-left: 0.3rem;
    }
    #coniatner ul .li-3 .bj{
        width: 0.9rem;
        height: 0.9rem;
        background-color: #b38eff;
        border-radius: 3px;
        float: left;
        margin-top: 0.3rem;
    }
    #coniatner ul .li-3 img{
       width: 0.57rem;
       height: 0.65rem;
       position: absolute;
       margin-left: 0.15rem;
       margin-top: 0.16rem;
    }
    #coniatner ul .li-3 p{
        float: left;
        font-size: 20px;
        margin-top: 0.5rem;
        margin-left: 0.1rem;
    }
    #coniatner ul .li-4{
        width: 7.2rem;
        height: 1.4rem;
        border-bottom: 1px  solid #e6e6e6;
        margin-left: 0.3rem;
    }
    #coniatner ul .li-4 span{
        font-size: 20px;
        float: left;
        margin-top: 0.6rem;
    }
    #coniatner ul .del{
        float: left;
        width: 1.4rem;
        height: 1.4rem;
        background-color: #fe0000;
        margin-left: 4.34rem;
    }
    #coniatner ul .del p{
        font-size: 25px;
        color: white;
        margin-top: 0.39rem;
        margin-left: 0.35rem
    }

    </style>
    望大佬解惑,

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益