add li elements to ul list with .after() method issue

Question

I'm trying to add li element to ul list. But after i open page source, i can't see that my DOM was updated. Here is the code bellow. I can't delete element also.... When i click on delete button nothing happens.

   var msg       = $('#danger').hide();
   var inputText = $('#todo');
   //var list      = $('#list');
   var globalObj;

   //general function that will call other functions
   function addListElement(event)
   {
       event.preventDefault();
       var input = inputText.val();
       if( input == '')
       {
           msg.show();
       }
       else
       {
           msg.hide();
           addCookie(input);
           readCookie();
       }

   }
    //function for adding value to cookie
    function addCookie(inputValue)
    {
        globalObj = {text: ''+ inputValue+''};
        $.cookie('vesko', '' +  globalObj.text + '');

    }
    // function for reading cookie
    function readCookie()
    {
        var listCookie = $.cookie('vesko');

        $('#list').after('<li><input type="checkbox">' + listCookie + '<button class="delete">Delete</button></li>');
    }



   $(function (){
       $('#add').on('click', addListElement);
       $('.delete').on('click', function(){
         $('.delete').parent().remove();
       });
   });



<div class="container-fluid">

  <div class="row">
   <div class="col-md-8">
    <h1> <strong> Todo app</strong></h1>
    <div class="alert alert-danger" id="danger" role="alert"><strong>Please type something in the field!</strong></div>
     <form action="" method="" class="form-inline">
      <div class="form-group">
       <div class="input-group">
        <div class="input-group-addon"><span class="glyphicon glyphicon-floppy-save"></span></div>
         <input type="text" class="form-control" name="todo" id="todo" placeholder="Type Something">
       </div>
      </div>
      <button type="submit" id="add"  class="btn btn-primary">Add ToDo Task</button>

     </form>
   </div>
  </div>
  <br><br><br>
  <!-- row for ul list elements -->
  <div class="row">
   <div class="col-md-5">
    <ul id="list">
    </ul>
   </div>
  </div>

</div>

http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Apr 22 '15 at 12:12
Can you post your HTML code you're working with? Is `#list` the ID of the `ul`? — Ben, Apr 22 '15 at 12:13
Is the element with id `list` an `li` element in the list? That's the only type of element that could be in the right place to use `after` to add list elements. — Guffa, Apr 22 '15 at 12:15

renakre · Accepted Answer · 2015-04-22T12:30:10.950

0

Can you change this $('#list').after to $('#list').append? You need to share more html to get better help.

after will put everything after your list not within your list. You should use append which will add your new item to the end of the list called #list.

You also need to reconsider this section:

$(function (){
   $('#add').click(function(event){
        addListElement(event);
   });
   $(document).on('click', '.delete', function(){
       $(this).parent().remove();
   });
});

edited Apr 22 '15 at 12:30

answered Apr 22 '15 at 12:14

renakre

8,001
5
46
99

i added append but stil nothing – Vesko Vujovic Apr 22 '15 at 12:26
@VeskoVujovic can you see the code I added, please use that code for event handlers – renakre Apr 22 '15 at 12:30
hahahahhahahaha it works now hahahha THANK YOU MAN :D big thanks i'm so happy :) – Vesko Vujovic Apr 22 '15 at 12:51
and you can mark it as good question :) $(document) this saved the day – Vesko Vujovic Apr 22 '15 at 12:56

score 0 · Answer 2 · answered Apr 22 '15 at 12:15

0

If #list is a ul, then you want to use "append" not "after". After will add an orphaned li, as the same suggests, after the ul, while append will put it inside the ul.

Assuming that you might have multiple delete buttons too, you should also consider changing:

$('.delete').parent().remove();

to

$(this).parent().remove();

answered Apr 22 '15 at 12:15

Andrew Spode

637
1
7
12

i tried everything but main problem is that my DOM tree is not updated, every time i click view page source there is no li element inside ul. Thats the problem :) – Vesko Vujovic Apr 22 '15 at 12:17
Is this code in a $(document).ready, or at least at the bottom of the page, after the HTML? – Andrew Spode Apr 22 '15 at 12:20

add li elements to ul list with .after() method issue

2 Answers2