Cancellare un elemento del DOM

[cleto]

Salve ho un button per aggiungere dei tag <li></li> all'interno di <ul id="orders"></ul>

<ul id="orders">
</ul>

<h2>aggiungi ordine</h2>

<input type="button"  id="add-order" value="Add order"></button>

questo lo script:

<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

 

[nixiam]

Ciao,
nel caso di $(".remove").on('click', function(){}); il bind funziona solo per gli elementi già presenti nel DOM.
Se provi a spostando sotto a addOrder(); o al suo interno funziona

 

[cleto]

ok danke

 

[macus_adi]

Potresti pensare ad utilizzare backbone!

 

[cleto]

non lo conoscevo...ovvio...danke