我不知道如何防止它克隆删除按钮

Question

嗨，我已经为此工作了几个小时，但我仍然不明白我哪里出错了这就是我们被要求做的

现在为每个新项目（不是第一个）添加一个删除按钮。通过点击这个按钮，对应的item my-item，包括item-header和item-body，从页面中移除，而其他的不受影响

这就是我所做的

<!DOCTYPE HTML>
<html>
    <head>
    <title></title>
    <script src="library/jquery.js"></script>
    <script>
    /*This task illustrates the sliding effects that can be produced
    with jQuery. Create a div with the class my-item that contains two 
    other divs, the first with the class item-header and the second
    with the class item-body. The item-header div contains an <h2> tag
    with some text (e.g. Click Me). The item-body div also contains some 
    text, but the div is initially hidden. If the user clicks on the 
    <h2> headline, the div item-body should slide down and its contents 
    become visible. After another click on the headline, the  div should 
    slide up and its contents become invisible

    Extend your code from the previous task in such a way that a deep 
    copy of the first div with the class my-item can be appended to the 
    body of the document by clicking on a button. Be sure to modify your 
    event handler from the previous task so that it also works for the 
    new elements.

    Now add a button Delete to each new item (not to the first one). By 
    clicking on this button, the corresponding item my-item, including 
    item-header and item-body, is removed from the page, while the 
    others are not affected.*/

        $(document).ready(function() {

        $('#copy').click(function(){
        $('.my-item:last')//i have to exclude the first 1
        .clone()
        .append( '<button id = "away">Delete</button>' )
        .appendTo('body')
        ;
        });

       $('.item-body').hide();

            $(document).on( 'click','h2', function() {

            if($(this).parent().next().is(':visible')){

            $(this).parent().next().slideUp();

            }

            else{

            $(this).parent().next().slideDown();

            }



        $(document).on('click', '#away', function() {
        $(this).parent().remove();

        });   




        });













        });


    </script>
    </head>
        <body>
        <div class = 'my-item'>
            <div class = 'item-header'>
                <h2>Jesus is the only Hope</h2>
            </div><!--closing tag for for div item-header-->

            <div class = 'item-body'>
                <h2>I believe in Him</h2>
                <p>je leve les yeux vers les monts que jaime dou peut me venir ici le secours. Le secours me vient de lEternel meme</p>
            </div><!--closing tag for the div item-body-->

       </div><!-- This is the closing tag of div my_item-->
       <button id ='copy'>copy</button>

        </body>
</html>

谁能给我任何提示，让我知道哪里出错了？

Answer 1

您已将 delete 按钮的点击事件放置在 h2 的点击事件中。将其放在 h2 单击事件之外并放在 $(documant).ready() 中。克隆 $('.my-item:first') 而不是 $('.my-item:last')，因为从第二个 $('.my-item:last') 开始它已经有一个删除。

<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#copy').click(function () {
                    $('.my-item:first')
                    .clone()
                    .append('<button id = "away">Delete</button>')
                    .appendTo('body')
                    ;
                });

                $('.item-body').hide();

                $(document).on('click', 'h2', function () {
                    if ($(this).parent().next().is(':visible')) {
                        $(this).parent().next().slideUp();
                    }
                    else {
                        $(this).parent().next().slideDown();
                    }
                });

                $(document).on('click', '#away', function () {
                    $(this).parent().remove();
                });
            });
        </script>
    </head>
    <body>
        <div class='my-item'>
            <div class='item-header'>
                <h2>Jesus is the only Hope</h2>
            </div><!--closing tag for for div item-header-->

            <div class='item-body'>
                <h2>I believe in Him</h2>
                <p>je leve les yeux vers les monts que jaime dou peut me venir ici le secours. Le secours me vient de lEternel meme</p>
            </div><!--closing tag for the div item-body-->

        </div><!-- This is the closing tag of div my_item-->
        <button id='copy'>copy</button>

    </body>
</html>

我不知道如何防止它克隆删除按钮

I do not know how to keep it from cloning the delete button

jquery

clone

infinite