1

I made a to do list using Bootstrap and jQuery. Items get deleted from the list by clicking on the 'X' badge on the right side of each list item. This works for the items that are on the page when it first loads, but you can't remove items that are added by the user.

Maybe something needs to be refreshed to remind the script that new elements should be monitored for the click event?

http://jsfiddle.net/pcx5mvh7/

todo.js:

$(document).ready(function() {
    //add item if the button is clicked
    $('#addButton').click(function(){
        $('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
        $('#input').val(null);
    });

    //add item if the enter key is pressed
    $('#input').bind("enterKey",function(e){
        $('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
        $('#input').val(null);
    });

    $('#input').keyup(function(e){
        if(e.keyCode == 13) {
            $(this).trigger("enterKey");
        }
    });

    //remove an item by clicking the badge
    $('.badge').click(function() {
        $(this).parent().remove();
    });
});

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To Do List</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="todo.js"></script>
</head>
<body>
<div class="container">

    <div class="panel panel-default">

        <!-- Default panel contents -->
        <div class="panel-heading"><h3 class="panel-title">To Do List</h3></div>

      <!-- List group -->
    <ul id="list" class="list-group">
        <li class="list-group-item"><span class="badge">X</span>Pushups! </li>
        <li class="list-group-item"><span class="badge">X</span>Get Money</li>
        <li class="list-group-item"><span class="badge">X</span>Increase my word power</li>
        <li class="list-group-item"><span class="badge">X</span>Beat God at his own game</li>
        <li class="list-group-item"><span class="badge">X</span>Make everything go my way</li>
    </ul>
    </div>

    <!-- text input & button -->
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-btn">
                    <button id="addButton" class="btn btn-default" type="button">Add</button>
                </span>
                <input id="input" type="text" class="form-control">
            </div> <!-- end input group -->
        </div> <!-- end col-lg-6 -->
    </div> <!-- end row -->
    <br>
</div>
</body>
</html>
Siguza
  • 21,155
  • 6
  • 52
  • 89
ajHurliman
  • 147
  • 2
  • 15

2 Answers2

7

try this demo: http://jsfiddle.net/enw5rcdx/

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

code

   //remove an item by clicking the badge
    $(document).on('click', '.badge', function () {
        $(this).parent().remove();
    });
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • using `$(document).on()` is inefficient. it should be the parent container of `.badge` instead. Ie. `$(.badge-parent).on('click', '.badge, function(){...});` – agconti Sep 21 '14 at 23:07
  • 1
    Sure, `:)` Demo is for sample code so that OP reads API and do whatever he/she feels like. Also how much efficiency we are looking here (in this specific case)? .00001 ms? depends on DOM, but yeah agree with you. OP not e this but do read the API document. – Tats_innit Sep 21 '14 at 23:12
1

This should work http://jsfiddle.net/pcx5mvh7/4/

Explanation

After the item is added this code is run:

$(".badge").last().click(function () {$(this).parent().remove();});

This adds a click event to the last ".badge" ie. the one just added which will remove the item when the x is clicked.

Community
  • 1
  • 1
ShaneQful
  • 2,140
  • 1
  • 16
  • 22