问答详情
源自:5-3 DOM包裹wrap()方法

请问大佬,如果想要添加一个按钮用来删除给p元素添加的div怎么写?

如标题 。求大佬指教

提问者:qq_慕娘6581288 2019-05-27 21:51

个回答

  • CodeOfCoin
    2019-05-28 16:12:52
    已采纳

    $('p').unwrap(); //如果div是p的父结点的话

    $('p div').remove(); // 如果是div是p的子节点的话

  • CodeOfCoin
    2019-05-30 17:41:45

    https://img2.mukewang.com/5cefa54000013b9504500022.jpg你看看你这行代码,class写成了calss

  • qq_慕娘6581288
    2019-05-29 11:30:59

    我这样写不行啊,怎么回事?加粗的地方是我添加的按钮和代码

    <!DOCTYPE html>

    <html>


    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title></title>

        <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

        <style>

        .left div,

        .right div {

            width: 100px;

            padding: 5px;

            margin: 5px;

            float: left;

            border: 1px solid #ccc;

            background: #bbffaa;

        }

        

        .right div {

            background: yellow;

        }

        

        p {

            border: 1px solid red;

        }

        

        a {

            border: 1px solid blue;

        }

        </style>

    </head>


    <body>

        <h2>DOM包裹wrap()方法</h2>

        <div class="left">

            <button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>

            <button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</button>

            <button calss="aaron3">点击删除p元素添加的div</button>

        </div>

        <div class="right">

            <p>p元素</p>

            <p>p元素</p>

        </div>

        <div class="left">

            <a>a元素</a>

            <a>a元素</a>

        </div>

        <script type="text/javascript">

        $(".aaron1").on('click', function() {

            //给所有p元素,增加父容器div

            $('p').wrap('<div></div>')

        })

        </script>

        

        <script type="text/javascript">

        $(".aaron2").on('click', function() {

            $('a').wrap(function() {

                return '<div class="' + $(this).text() + '" />';

            })

        })

        </script>

        <script type="text/javascript">

        $(".aaron3").on('click', function() {

            //删除给p添加的父容器div

            $('p').unwrap()

        })

        </script>

    </body>


    </html>