Löschen eines dynamisch erstellten li-Tags

Question

Ich arbeite an einer HTML-Seite, auf der dynamisch eine Textliste erstellt wird. Ich muss diese li auswählbar machen, damit sie auch gelöscht werden können ... Wie soll ich es tun? Ich habe versucht, mit der Delegate-Funktion, aber es hat nicht funktioniert.
Dies ist der Code, wie das li erzeugt wird ...

$('#post_btn').click(function() { 
    // body... 
    var note = $('#textArea').val(); 
    $('<li>').text(note).prependTo('.notes'); 
    $('#textArea').val(''); 
    $('#post_btn').addClass('disabled'); 
}); 

Answer 1

Während Sie auf das li Element klicken, schalten Sie eine Klasse um und entfernen Sie li, die diese Klasse haben.

$('#post_btn').click(function() { 
 
    var note = $('#textArea').val(); 
 
    $('<li>').text(note).prependTo('.notes'); 
 
    $('#textArea').val(''); 
 
    $('#post_btn').addClass('disabled'); 
 
}); 
 

 
// toggle select class while clicking on the li 
 
$('.notes').on('click', 'li', function() { 
 
    $(this).toggleClass('select'); 
 
}); 
 

 
// remove the li which have class select 
 
$('#delete').click(function() { 
 
    $('.notes li.select').remove(); 
 
});

.select { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="notes"></ul> 
 
<textarea id="textArea"></textarea> 
 

 
<button id="post_btn">Add</button> 
 
<button id="delete">Delete</button>

Answer 2

Ich glaube nicht, dass Sie genug Quellcode zu beantworten gepostet. Aber wenn dies der Fall ist:
https://jsfiddle.net/7xarmzbt/

<ul id='ul'> 

</ul> 
<button onclick='al();'> 
Add li 
</button> 
<script> 
var total=-1; 
function al() 
{ 
total++; 
document.getElementById('ul').innerHTML+="<li id='li"+total+"' onclick='deleteli("+total+");'>Li #"+total+"</li>"; 
} 
function deleteli(total_2) 
{ 
document.getElementById('li'+total_2).remove(); 

} 
</script> 

Dann

document.getElementById('ELEMENT_ID').remove(); 

wird für Sie arbeiten. Bei der Erzeugung des li, fügen Sie einfach eine ID hinzu, die sich für jedes li ändert (wie meine 'total' var, die nicht wirklich die Gesamtanzahl von li's ist, sondern mehr von der insgesamt hinzugefügten Anzahl). Für reach li, habe eine Löschfunktion, die die ID enthält, wie meine. Kommentar zu meiner Antwort für weitere Hilfe, wenn ich falsch angenommen habe.
JQUERY CODE ÄQUIVALENTEN

document.getElementById('ELEMENT_ID').remove(); 

ist die gleiche wie

$("#YOURIDHERE").remove(); 

in jquery.