Почему не срабатывают .remove и .removeClass?

$(document).on("click", "#remove", function() {
// код //
  console.log('Удалено');  // пример
})

$('#remove').bind('click', function() {
	console.log('Удалено');
});

$('#add').bind('click', function() {
	console.log('Добавлено');
});

$(document).on('click', '#remove' function() {
	console.log('Удалено');
});

$(document).on('click', '#add' function() {
	console.log('Добавлено');
});

$(".item").click(function(){ // при клике на товар
if(count == 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="add">Take All</span>'); // добавляем в него спан "Забрать все"
  $("#remove").click(function(){
    // код //
    console.log('Удалено');  // пример
  });
}
if(count != 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="remove">Clear</span>'); // добавляем в него спан "Удалить все"
  $("#add").click(function(){
    // код //
    console.log('Добавлено');  // пример
  });
}
});

$(".item").click(function(){ // при клике на товар
if(count == 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="add">Take All</span>'); // добавляем в него спан "Забрать все"
}
if(count != 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="remove">Clear</span>'); // добавляем в него спан "Удалить все"
}
});

$(".buttondiv").click(function(e){
    if(e.target.id === 'remove') {
      console.log('Удалено');
    } else if(e.target.id === 'add') {
      console.log('Добавлено');
    }
});