Salve ho un button per aggiungere dei tag <li></li> all'interno di <ul id="orders"></ul>
questo lo script:
quello che non riesco a capire è perché per cancellare il tag <li></li> inserito devo usare $("#orders").on('click', '.remove', function(){ }); e invece $(".remove").on('click', function(){}); non funziona
grazie
HTML:
<ul id="orders">
</ul>
<h2>aggiungi ordine</h2>
<input type="button" id="add-order" value="Add order"></button>
questo lo script:
Codice:
<script>
$(function (){
var $orders = $('#orders');
var $name = 'gino';
var $drink = 'latte';
function addOrder(order){
$orders.append('<li>Name: ' + $name + ', drink: ' + $drink + '<p><button class="remove">Delete</button></p></li>')
}
$("#add-order").on('click', function(){
addOrder();
});
/*
$(".remove").on('click', function(){
$(this).closest('li').remove();
});
*/
$("#orders").on('click', '.remove', function(){
$(this).closest('li').remove();
});
});
quello che non riesco a capire è perché per cancellare il tag <li></li> inserito devo usare $("#orders").on('click', '.remove', function(){ }); e invece $(".remove").on('click', function(){}); non funziona
grazie