I am making a Todo list using HTML, CSS and jQuery. So basically when the person types an activity and presses the '+' button it gets added to the list along with a 'Delete'(Font Awesome Recycle Bin) icon so that the user can delete the activity. I have implemented this using the .append() function. However, when a user adds the first item there is one delete button. However for every other list the number of delete buttons multiply. (Eg. when the user adds the second item there are two delete buttons for that item, and when they add the third item there are three delete buttons for that item). I can't understand why this is happening and what is the best way to fix this?

I have used .append() on the .listInput and appended the .newItem. I have then used .append() on the .newItem and appended the can icon.

$(".enter").click(function() {
  var $item = $('input[name=add]').val();
  if ($item.length > 0) {
    $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '</li>');
    $('.newItem').append('<i class="animated fadeIn far fa-trash-alt fa-1x"></i>');
  } else {
    alert("Enter an acitvity to add");
  }
})
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="takeInput">
  <input type="text" name="add" value="Add Your Item Here">
  <i class="enter fas fa-plus fa-3x"></i>
</div>

<ul class="listInput">
</ul>

I want only one trash icon for each list item.

5 Answers

3
j08691 On

$('.newItem').append() will append something to all elements with the class newItem, not just the one you just added. To fix that just use a single append:

$(".enter").click(function() {
  var $item = $('input[name=add]').val();
  if ($item.length > 0) {
    $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '<i class="animated fadeIn far fa-trash-alt fa-1x"></i></li>');
  } else {
    alert("Enter an acitvity to add");
  }
})
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="takeInput">
  <input type="text" name="add" value="Add Your Item Here">
  <i class="enter fas fa-plus fa-3x"></i>
</div>

<ul class="listInput">
</ul>

1
Itai On

Please try this

var $item = $('input[name="add"]').val();
1
Community On

The problem is that $('.newItem') refers to any element that has that class. For example, if you have five items on the list they will all have the class new item. If you were to add another item (that makes six items), then you are adding a bin icon to each element with class 'newItem'

1
Robbie McMullen On
$(".enter").click(function() {
  var $item = $('input[name=add]').val();
  if ($item.length > 0) {
    $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '</li>' + '<i class="animated fadeIn far fa-trash-alt fa-1x"></i>');
  } else {
    alert("Enter an acitvity to add");
  }
})
1
user10601317 On

$(".enter").click(function() {
  let item = $('input[name=add]').val();
  let li = $('<li class="newItem animated fadeIn"/>');
  let iconTrash = $('<i style="margin-left:1em;" class="animated fadeIn far fa-trash-alt fa-1x"/>')
  if (item.length >= 0) {
  li.append(item,iconTrash)
    $(".listInput").append(li);
  } else {
    alert("Enter an acitvity to add");
  }
})
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="takeInput">
  <input type="text" name="add" value="Add Your Item Here">
  <i class="enter fas fa-plus fa-3x"></i>
</div>

<ul class="listInput">
</ul>