CODEWITHSUNDEEP
jqueryhtmlbutton
OriginalDuplicate
OriginalDuplicate

Reputation: 3

jquery button within <li> won't remove it

New to HTML / CSS / JQuery / Bootstrap. I have managed to add an li to the ul from an input. Within the li is a button that should delete the li but it doesn't.

The Jquery event handler is looking for a 'click' on the .removeListItem class within #theList ID. The function tied to this event is to e.preventDefault and remove the closest li. However, this doesn't seem to be happening.

$('#theList').on('click', '.removeListItem', function (event) {
  event.preventDefault();
  $(this).closest('li').remove();
});

Since I am adding the .removeListItem class dynamically I tried...

$('.removeListItem').on('click', function (event)
event.preventDefault();
$(this).closest('li').remove();
});

...this didn't work either.

I have since tried looking within document for the .removeListItem class and remove the closest li.

$(document).on('click', '.removeListItem', function (event) {
event.preventDefault();
$(this).closest('li').remove();
});

This still doesn't work.

What is wrong with the button and why no removal of the li it lives in?

Full code below.

HTML

<div class="jumbotron">
  <h1>Enter Task Below</h1>
    <form class="form-group">
      <input type="text" class="form-control" name="newtask" id="newTask" placeholder="...">
      <button type="submit" name="addTask" id="addTask" class="btn btn-lg btn-success" role= "button">Add New Task</button>
    </form>
 </div>
   <div class="row marketing">
     <div class="col-lg-12">
       <section class="panel tasks-widget">
         <div class="panel-body">
           <div class="task-content">
             <ul class="task-list sortable" id="theList">
             </ul>
           </div> 
         </div> 
       </section> 
     </div>
   </div>

JQUERY

$(document).ready(function () {
var newListItem
var newList = true;
var theList = document.getElementById('theList');

$('#addTask').on('click', function(e) {
  e.preventDefault();
  if (newList == true) {
    var theValue = $("#newTask").val();
    newListItem = '<li><span class="handle"> :: </span> <input class="listItem" style="border: none; background: transparent;" value="' + theValue + '"><button class="pull-right btn btn-danger btn-xs removeListItem"><i class="fa fa-trash-o "></i></button></li>';
        newList = false;
    } else {
        var theValue = $("#newTask").val();
        newListItem = $('#theList li:last').clone();
        newListItem.find('input').attr('value', theValue);
    }

    $('#theList').append(newListItem);

    $('#newTask').val('');
    $('#newTask').focus();
    });
    $('#theList').on('click', '.removeListItem', function (event) {
        event.preventDefault();
        $(this).closest('li').remove();
    });
    $('input[type="text"]').on('keydown', function (event) {
      if (event.keyCode === 13) {
        $("addTask").click();
    }
  });
});

Thank You!

Upvotes: 0

Views: 85

Answers (3)

Simon Wang
Simon Wang

Reputation: 2943

One line of the code is incorrect:

it is:

$(this).closest(li).remove();

It should be:

$(this).closest('li').remove();

EDIT:

http://jsfiddle.net/3f0bhyux/

which looks working with the change

Upvotes: 1

OriginalDuplicate
OriginalDuplicate

Reputation: 3

Turns out the closing }); were all out of whack. A lot of events were taking place within another event which wouldn't allow them to work.

Upvotes: 0

Muhammad Atif
Muhammad Atif

Reputation: 36

$('#theList').on('click', '.removeListItem', function (event) {
  event.preventDefault();
  $(this).parents("li").remove();
});

Upvotes: 0

Related Questions