jQuery List Item Remove

Question

i got this code written a few minutes ago I was wondering if why won't the item be removed.

(function($) {
  $('#btn1').click(function() {
    var textVal = $('#input').val();
    if (textVal != "") {
      $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" value="X"></input></li> ');
    }
  });
  $('.remove-item').click(function () {
    $('.list #' + textVal).remove()
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="input" type="text" />
<input type="button" id="btn1" value="Add" />
<ul id="list"></ul>

You need event delegation here! – Dhaval Marthak Sep 30 '16 at 04:48 — Dhaval Marthak, Sep 30 '16 at 04:48

score 2 · Answer 1 · answered Sep 30 '16 at 04:55

You need to add an .on() over body and check if the clicked class is .remove-item and remove() it.

(function($) {
  $('#btn1').click(function() {
    var textVal = $('#input').val()
    if (textVal != "") {
      $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" value="X"></input></li> ');
    }
  });
  $('body').on('click', '.remove-item', function(e) {
    $(this).parent().remove()
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
<input type="button" id="btn1" value="Add" />

<ul id="list">
</ul>

Siddhesh Kulkarni · Accepted Answer · 2016-09-30T05:16:40.673

Try this code :

  var textVal;
    $('#btn1').click(function(){
      textVal = $('#input').val()
        if (textVal != ""){
 $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" id='+textVal+' value="X"></input></li> ');
          
    $('#'+ textVal +' .remove-item' ).click(function (e){
    $(e.target).parent().remove();
    });
          
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
    <input type="button" id="btn1" value="Add" />

    <ul id="list">
    </ul>

Also i would suggest to use Backbone.js (Based on MVC) for such Apps

score 0 · Answer 3 · answered Sep 30 '16 at 04:54

Please check this. No need to grab text for current li. Instead you can search for parent li and can remove it as follows:

(function($) {
  $('#btn1').click(function() {
    var textVal = $('#input').val()
    if (textVal != "") {
      $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" value="X"></input></li> ');
    }
  });


  $("#list").on('click', '.remove-item', function() {
    $(this).closest("li").remove()

  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
<input type="button" id="btn1" value="Add" />

<ul id="list">
</ul>

jQuery List Item Remove

3 Answers3