Cancellare un elemento del DOM

cleto

Nuovo Utente
28 Feb 2012
9
0
1
Salve ho un button per aggiungere dei tag <li></li> all'interno di <ul id="orders"></ul>

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
 

nixiam

Nuovo Utente
14 Ago 2017
11
0
1
32
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