Question

我正在尝试在待办事项列表项目中使用删除按钮。我尝试过很多不同的东西，但我没有运气。我相信这个问题源于这样一个事实，即我试图引用当用户在待办事项列表中输入新任务时由Javascript / jQuery创建的HTML li标签中的按钮。我可能搞乱了两者之间的语法关系。任何帮助将不胜感激。提前谢谢。

这是HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Project 4 - To Do List</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="page">
            <h1 id="header"></h1>
            <h2>To Do List <span id="counter"></span></h2>
            <h3>"If you can dream it, you can do it" - Walt Disney</h3>
            <div id="newItemButton"><button href="#" id="showForm">New Entry</button></div>
            <form id="newItemForm">
                <input type="text" id="itemDescription" placeholder="Enter goal" />
                <input type="submit" id="add" value="Submit"/>
            </form>
            <ul>
                <!--<li id="one">Exercise</li>
                <li id="two">Study</li>
                <li id="three">Practice a New Language</li>
                <li id="four">Work on Personal Project</li>-->
            </ul>
        </div>
        <div class="about">
            <a id="link" href="x">About</a>
        </div>
        <script src="jquery-1.11.0.js"></script>
        <script src="javascript_jquery.js"></script>
    </body>
    <footer>
        <div id="footer">To do List Icons made by <a id="link" href="http://www.freepik.com" title="Freepik">Freepik</a> from <a id="link" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a id="link" href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
        </div>
        <div id="footer">Trash Icons made by <a id="link" href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a id="link" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a id="link" href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
    </footer>
</html>

这是Javascript / jQuery。我的问题的焦点在于底部的删除功能，可能是＆＃34;检查完成后的.append部分。＆＃34;

/*eslint-env jquery*/
/* eslint-env browser */

$(document).ready(function() {

    // SETUP
    var $list, $newItemForm, $newItemButton;
    var item = '';                                 // item is an empty string
    $list = $('ul');                               // Cache the unordered list
    $newItemForm = $('#newItemForm');              // Cache form to add new items
    $newItemButton = $('#newItemButton');          // Cache button to show form

    // ITEM COUNTER
    function updateCount() {                       // Create function to update counter
        var items = $('li[class!=complete]').length; // Number of items in list
        $('#counter').text(items);                   // Added into counter circle
    }
    updateCount();                                 // Call the function

    // SETUP FORM FOR NEW ITEMS
    $newItemButton.show();                         // Show the button
    $newItemForm.hide();                           // Hide the form
    $('#showForm').on('click', function() {        // When click on add item button
        $newItemButton.hide();                       // Hide the button
        $newItemForm.show();                         // Show the form
    });

    // ADDING A NEW LIST ITEM
    $newItemForm.on('submit', function(e) {       // When a new item is submitted
        e.preventDefault();                         // Prevent form being submitted
        var text = $('input:text').val();           // Get value of text input
        $list.append('<li>' + text + '</li>');      // Add item to end of the list
        $('input:text').val('');                    // Empty the text input
        updateCount();                              // Update the count
    });

    //Check as Complete
    $list.on('click', 'li', function() {
        var $this = $(this);
        var complete = $this.hasClass('complete');

        if (complete !== true) {
            item = $this.text();             // Get the text from the list item
            $this.remove();                  // Remove the list item
            $list                            // Add back to end of list as complete
                .append('<li class=\"complete\">' + item + '<button type="button" class="trashbutton" src="/images/icon-trash.png" alt="Trash Icon"></button>' + '</li>')
                .hide().fadeIn(300);           // Hide it so it can be faded in
            complete = true;
        }
        updateCount();
    });

    /*//Check as Incomplete
    $list.on('click', 'li', function() {
        var $this = $(this);
        var complete = $this.hasClass('complete'); 

        if (complete === true) {
            item = $this.text();
            $this.remove();
            $list
                .append('<li>' + item + '</li>')
                .hide().fadeIn(300);
        }
        updateCount();
    });*/

    // Delete
    $list.on('click', 'li', function() {
        var $this = $(this);
        var readyToDelete = $this.hasClass('trashbutton');

        if(readyToDelete === true) {
            $this.animate({                
                opacity: 0.0,
                paddingLeft: '+=180'
            }, 500, 'swing', function() {
                $this.remove();
            });
        }
        updateCount;
    }); 
});

以下是CSS以防万一。

@import url(http://fonts.googleapis.com/css?family=Oswald);

body {
    background-color: whitesmoke;
    font-family: 'Oswald', 'Futura', sans-serif;
    margin: 0; 
    padding: 0;
}

#page {
    background-color: black;
    margin: 0 auto 0 auto;
    position: relative;
    text-align: center;
}
/* Responsive page rules at bottom of style sheet */

h1 {
    background-image: url('/images/icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    text-indent: -1000%;
    height: 75px;
    line-height: 75px;
    width: 117px;
    margin: auto auto auto auto;
    padding: 30px 10px 20px 10px;
}

h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3em;
    display: inline-block;
    margin: 0 0 23px 0;
}

h2 span {
    background-color: #fff;
    color: green;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
    display: inline-block;
    position: relative;
    border-radius: 50%;
    top: -5px;
    height: 22px;
    width: 26px;
    padding: 4px 0 0 0;
}

h3 {
    color: white;
}

ul {
    border:none;
    padding: 0;
    margin: 0;
}

li {
    background-color: yellowgreen;
    color: black;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    font-size: 24px;
    letter-spacing: .05em;
    list-style-type: none;
    text-shadow: 1px 1px 1px grey;
    text-align: left;
    height: 50px;
    padding-left: 1em;
    padding-top: 10px;
    padding-right: 1em;
}

/* unvisited link */
#link:link {
    color: yellowgreen;
}

/* visited link */
#link:visited {
    color: green;
}

/* mouse over link */
#link:hover {
    color: darkseagreen;
}

/* selected link */
#link:active {
    color: forestgreen;
}

.about {
    text-align: center;
}

#footer {
    background:none;
    color: black;
    text-align: center;
}

.complete {
    background-color: #999;
    color: white;
    border-top: 1px solid #666;
    border-bottom: 1px solid #b0b0b0;
    text-shadow: 2px 2px 1px #333;
}

.trashbutton {
    background-image: url('/images/icon-trash.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    margin: auto !important;
    position: relative;
    top: 35%;
    transform: translateY(-50%);

}

/* FORM STYLES */

form {
    padding: 0 20px 20px 20px;
}

input[type='text'], input[type='password'], textarea {
  background-color: whitesmoke;
  color: black;
  font-size: 24px;
  width: 96%;
  padding: 4px 6px;
  border: 1px solid #999;
  border-radius: 8px;}

input[type='submit'], a.add, button, a.show {
    background-color: yellowgreen;
    color: black;
    border-radius: 8px;
    border: none;
    padding: 8px 10px;
    margin-top: 10px;
    font-family: 'Oswald', 'Futura', sans-serif;
    font-size: 18px;
    text-shadow: 1px 1px 1px grey;
    text-decoration: none;
    text-transform: uppercase;}

input[type='submit'], button {
    float: right;
} 

input[type='submit']:hover {
    background-color: green;
    color: #fff;
    cursor: pointer;
}

/* form example */
#newItemButton {
    padding: 10px 20px 75px 20px;
    display: none;
}

#newItemForm {
    padding-top: 20px;
}

#itemDescription {
    width: 325px;
}

#newItemForm input[type='submit'] {
    margin-top: 0;
    text-align: center;
}

/* Attributes example */
#group {
    margin: 10px;
    border: 2px solid #fff;
}

/* Small screen:mobile */
@media only screen and (max-width: 500px) {
    body {
        background-color: #403c3b;
    }
    #page {
        max-width: 480px;
    }
}

@media only screen and (min-width: 501px) and (max-width: 767px) {
    #page {
        max-width: 480px;
        margin: 20px auto 20px auto;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #page {
        max-width: 480px;
        margin: 20px auto 20px auto;
    }
}

/* Larger screens act like a demo for the app */
@media only screen and (min-width: 960px) {
    #page {
        max-width: 480px;
        margin: 20px auto 20px auto;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    h1{
        background-image: url('/images/icon.png');
        background-size: 100px 100px;
    }
}

到目前为止有效的截图。您可以将任务显示为绿色不完整，灰色显示，以及任务灰色时显示垃圾按钮。

When app first loads

One incomplete task and one complete task. Notice trash button that does not work.

注意：我应该提一下，虽然经过大量修改，HTML和JS代码来自Jon Duckett的Javascript和jQuery书中的一个例子。这是我第一次使用jQuery，这项任务的目的是学习基础知识。

Answer 1

以下是如何使其发挥作用：

将$list.on('click', 'li', function() {更改为$list.on('click', 'li > button', function() {（您的列表项没有'trashbutton'类）。
更新用于删除元素的代码，因为单击按钮后您必须删除父元素（li），而不是按钮本身。

看看这个行动：

$(document).ready(function() {

    // SETUP
    var $list, $newItemForm, $newItemButton;
    var item = '';                                 // item is an empty string
    $list = $('ul');                               // Cache the unordered list
    $newItemForm = $('#newItemForm');              // Cache form to add new items
    $newItemButton = $('#newItemButton');          // Cache button to show form

    // ITEM COUNTER
    function updateCount() {                       // Create function to update counter
        var items = $('li[class!=complete]').length; // Number of items in list
        $('#counter').text(items);                   // Added into counter circle
    }
    updateCount();                                 // Call the function

    // SETUP FORM FOR NEW ITEMS
    $newItemButton.show();                         // Show the button
    $newItemForm.hide();                           // Hide the form
    $('#showForm').on('click', function() {        // When click on add item button
        $newItemButton.hide();                       // Hide the button
        $newItemForm.show();                         // Show the form
    });

    // ADDING A NEW LIST ITEM
    $newItemForm.on('submit', function(e) {       // When a new item is submitted
        e.preventDefault();                         // Prevent form being submitted
        var text = $('input:text').val();           // Get value of text input
        $list.append('<li>' + text + '</li>');      // Add item to end of the list
        $('input:text').val('');                    // Empty the text input
        updateCount();                              // Update the count
    });

    //Check as Complete
    $list.on('click', 'li', function() {
        var $this = $(this);
        var complete = $this.hasClass('complete');

        if (complete !== true) {
            item = $this.text();             // Get the text from the list item
            $this.remove();                  // Remove the list item
            $list                            // Add back to end of list as complete
                .append('<li class=\"complete\">' + item + '<button type="button" class="trashbutton" src="/images/icon-trash.png" alt="Trash Icon"></button>' + '</li>')
                .hide().fadeIn(300);           // Hide it so it can be faded in
            complete = true;
        }
        updateCount();
    });

    /*//Check as Incomplete
    $list.on('click', 'li', function() {
        var $this = $(this);
        var complete = $this.hasClass('complete'); 

        if (complete === true) {
            item = $this.text();
            $this.remove();
            $list
                .append('<li>' + item + '</li>')
                .hide().fadeIn(300);
        }
        updateCount();
    });*/

    // Delete
    $list.on('click', 'li > button', function() {
        var $this = $(this);
        var readyToDelete = $this.hasClass('trashbutton');

        if(readyToDelete === true) {
            $this.parent().animate({                
                opacity: 0.0,
                paddingLeft: '+=180'
            }, 500, 'swing', function() {
                $(this).remove();
            });
        }
        updateCount;
    }); 
});

@import url(http://fonts.googleapis.com/css?family=Oswald);

body {
    background-color: whitesmoke;
    font-family: 'Oswald', 'Futura', sans-serif;
    margin: 0; 
    padding: 0;
}

#page {
    background-color: black;
    margin: 0 auto 0 auto;
    position: relative;
    text-align: center;
}
/* Responsive page rules at bottom of style sheet */

h1 {
    background-image: url('/images/icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    text-indent: -1000%;
    height: 75px;
    line-height: 75px;
    width: 117px;
    margin: auto auto auto auto;
    padding: 30px 10px 20px 10px;
}

h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3em;
    display: inline-block;
    margin: 0 0 23px 0;
}

h2 span {
    background-color: #fff;
    color: green;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
    display: inline-block;
    position: relative;
    border-radius: 50%;
    top: -5px;
    height: 22px;
    width: 26px;
    padding: 4px 0 0 0;
}

h3 {
    color: white;
}

ul {
    border:none;
    padding: 0;
    margin: 0;
}

li {
    background-color: yellowgreen;
    color: black;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    font-size: 24px;
    letter-spacing: .05em;
    list-style-type: none;
    text-shadow: 1px 1px 1px grey;
    text-align: left;
    height: 50px;
    padding-left: 1em;
    padding-top: 10px;
    padding-right: 1em;
}

/* unvisited link */
#link:link {
    color: yellowgreen;
}

/* visited link */
#link:visited {
    color: green;
}

/* mouse over link */
#link:hover {
    color: darkseagreen;
}

/* selected link */
#link:active {
    color: forestgreen;
}

.about {
    text-align: center;
}

#footer {
    background:none;
    color: black;
    text-align: center;
}

.complete {
    background-color: #999;
    color: white;
    border-top: 1px solid #666;
    border-bottom: 1px solid #b0b0b0;
    text-shadow: 2px 2px 1px #333;
}

.trashbutton {
    background-image: url('/images/icon-trash.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    margin: auto !important;
    position: relative;
    top: 35%;
    transform: translateY(-50%);

}

/* FORM STYLES */

form {
    padding: 0 20px 20px 20px;
}

input[type='text'], input[type='password'], textarea {
  background-color: whitesmoke;
  color: black;
  font-size: 24px;
  width: 96%;
  padding: 4px 6px;
  border: 1px solid #999;
  border-radius: 8px;}

input[type='submit'], a.add, button, a.show {
    background-color: yellowgreen;
    color: black;
    border-radius: 8px;
    border: none;
    padding: 8px 10px;
    margin-top: 10px;
    font-family: 'Oswald', 'Futura', sans-serif;
    font-size: 18px;
    text-shadow: 1px 1px 1px grey;
    text-decoration: none;
    text-transform: uppercase;}

input[type='submit'], button {
    float: right;
} 

input[type='submit']:hover {
    background-color: green;
    color: #fff;
    cursor: pointer;
}

/* form example */
#newItemButton {
    padding: 10px 20px 75px 20px;
    display: none;
}

#newItemForm {
    padding-top: 20px;
}

#itemDescription {
    width: 325px;
}

#newItemForm input[type='submit'] {
    margin-top: 0;
    text-align: center;
}

/* Attributes example */
#group {
    margin: 10px;
    border: 2px solid #fff;
}

/* Small screen:mobile */
@media only screen and (max-width: 500px) {
    body {
        background-color: #403c3b;
    }
    #page {
        max-width: 480px;
    }
}

@media only screen and (min-width: 501px) and (max-width: 767px) {
    #page {
        max-width: 480px;
        margin: 20px auto 20px auto;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #page {
        max-width: 480px;
        margin: 20px auto 20px auto;
    }
}

/* Larger screens act like a demo for the app */
@media only screen and (min-width: 960px) {
    #page {
        max-width: 480px;
        margin: 20px auto 20px auto;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    h1{
        background-image: url('/images/icon.png');
        background-size: 100px 100px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
            <h1 id="header"></h1>
            <h2>To Do List <span id="counter"></span></h2>
            <h3>"If you can dream it, you can do it" - Walt Disney</h3>
            <div id="newItemButton"><button href="#" id="showForm">New Entry</button></div>
            <form id="newItemForm">
                <input type="text" id="itemDescription" placeholder="Enter goal" />
                <input type="submit" id="add" value="Submit"/>
            </form>
            <ul>
                <!--<li id="one">Exercise</li>
                <li id="two">Study</li>
                <li id="three">Practice a New Language</li>
                <li id="four">Work on Personal Project</li>-->
            </ul>
        </div>
        <div class="about">
            <a id="link" href="x">About</a>
        </div>
        <script src="jquery-1.11.0.js"></script>
        <script src="javascript_jquery.js"></script>

Answer 2

通过为trashbutton类提供click事件以从列表中删除其父li，可以更轻松地完成任务。这可以通过以下代码完成。

  // Delete
    $('.trashbutton').click(function (e) {
        e.preventDefault();

        $(this).parent().animate({                
            opacity: 0.0,
            paddingLeft: '+=180'
        }, 500, 'swing', function() {
                $(this).parent().remove();
            });
        }
        updateCount();
    })

待办事项列表删除HTML <li>元素中的按钮

2 个答案: