append Element an dynamisch generierte div mit gleichen Klassennamen - Jquery

Question

Ich habe eine ToDo-Liste für die allererste Liste, ich kann Elemente hinzufügen. Ich kann auch mehrere ToDo-Listen dynamisch erstellen, aber während ich sie hier hinzufüge, wurde sie der ersten Liste hinzugefügt, anstatt der jeweiligen Liste, auf die ich klicke. Bitte jemand mir helfen, ich bin sehr neu in JavaScript.

$toDoList = $('#toDoList'); 
 
$newTodoList = $('#newTodoList'); 
 
$parent = $('#parent'); 
 
$ul = $('ul'); 
 
$totalList = $('.totalList'); 
 

 
$(".remove").click(function() { 
 
    confirm('Are you sure? do you want to delete the item') ? $(this).parent().remove() : $(this); 
 
}); 
 

 
$("li").click(function() { 
 
    $(this).hasClass("addBorder") ? $(this).removeClass("addBorder") : $(this).addClass("addBorder"); 
 
}); 
 

 
$('body').on('click', '.add', function() { 
 
    var itemName = $('#itemName').val(); 
 
    var listItem = $('<li>' + itemName + '<button type="button" class="buttonStyle">-</button></li>'); 
 
    listItem.on("click", function() { 
 
    confirm('Are you sure? do you want to delete the item') ? $(this).remove() : $(this); 
 
    }); 
 
    $totalList.append(listItem); 
 
    $('#itemName').val(''); 
 
}); 
 

 
index = 1; 
 
i = 1; 
 

 
function addNewList() { 
 
    var newList = $('<div class="listParent" id="newList"><button type="button" class="addNewList" onClick="addNewList()">+</button><h2>My ToDO List!!</h2><ul id="toDoList" class="totalList"><li>Java script<button type="button" class="remove buttonStyle">-</button></li><li>Angular<button type="button" class="remove buttonStyle">-</button></li><li>Jasmine<button type="button" class="remove buttonStyle">-</button></li></ul><div class="inputText"><input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input></div></div>'); 
 
    $('#newList').clone().attr('id', 'newList' + index++) 
 
    .insertAfter($('[id^=newList]:last')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent" id="parent"> 
 
    <div class="listParent" id="newList"> 
 
    <button type="button" class="addNewList" onclick="addNewList()">+</button> 
 
    <h2>My ToDO List!!</h2> 
 
    <ul id="toDoList" class="totalList"> 
 
     <li>Java script<button type="button" class="remove buttonStyle">-</button></li> 
 
     <li>Angular<button type="button" class="remove buttonStyle">-</button></li> 
 
     <li>Jasmine<button type="button" class="remove buttonStyle">-</button></li> 
 
    </ul> 
 
    <div class="inputText"> 
 
     <input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input> 
 
    </div> 
 
    </div> 
 
    <!-- New list -->

Answer 1

das erste, was ich sah, diese Zeile zu ändern, dass Sie die gleiche id mehrfach verwenden.

Also habe ich sie alle entfernt, da die "To-do-Liste" geklont werden soll.
Ich habe Ihren Code vereinfacht ... Ich hoffe, das wird Ihnen helfen.

// Remove (Delegate the clicks) 
 
$(document).on("click",".remove",function(){ 
 
    confirm('Are you sure? do you want to delete the item')? $(this).parent().remove():$(this); 
 
}); 
 

 
// Li border (Delegate the clicks) 
 
$(document).on("click","li",function(){ 
 
    $(this).hasClass("addBorder")?$(this).removeClass("addBorder"):$(this).addClass("addBorder"); 
 
}); 
 

 
// Add a to do item to the list where the add button has been clicked. 
 
$('body').on('click', '.add', function() { 
 
    
 
    // Find the relevant elements. 
 
    var thisParent = $(this).closest(".listParent"); 
 
    var newTodoVal = thisParent.find(".newToDo"); 
 
    var thisList = thisParent.find(".totalList"); 
 

 
    // If there in a name inputed. 
 
    if(newTodoVal.val() !=""){ 
 
    var listItem = "<li>"+newTodoVal.val()+"<button type='button' class='buttonStyle'>-</button>"; 
 
    thisList.append(listItem); 
 
    newTodoVal.val(''); 
 
    } 
 
}); 
 

 
// Clone the last list to create a new one. 
 
$(".addNewList").on("click",function(){ 
 
    var lastList = $(".listParent").last(); 
 
    lastList.clone().insertAfter(lastList); 
 
});

.addBorder{ 
 
    border:1px solid black; 
 
    max-width:10em; 
 
} 
 
.leftmargin10{ 
 
    margin-left:10px; 
 
} 
 
.buttonStyle{ 
 
    margin-left:0.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <button type="button" class="addNewList">+</button> 
 
    <div class="listParent"> 
 
    <h2>My ToDO List!!</h2> 
 
    <ul class="totalList"> 
 
     <li>Java script<button type="button" class="remove buttonStyle">-</button></li> 
 
     <li>Angular<button type="button" class="remove buttonStyle">-</button></li> 
 
     <li>Jasmine<button type="button" class="remove buttonStyle">-</button></li> 
 
    </ul> 
 
    <div class="inputText"> 
 
     <input type="text" class="leftmargin10 newToDo" name="ListItem"> 
 
     <button type="button" class="buttonPlacement buttonStyle add">+</button> 
 
    </div> 
 
    </div> 
 
    <!-- New list --> 
 
</div>

Answer 2

Ich gehe davon aus, dass Sie die + auf ein Element, um eine Liste hinzuzufügen.

Sie haben diese Codezeile:

$totalList.append(listItem); 

In der Theorie, die listItem zu jeder Liste anhängen soll die Klasse = ‚totalList‘, ich glaube, Sie wollen es nur hinzugefügt, auf die Liste, in der die Taste + war geklickt haben, so würde ich war

$(this).closest('.totalList').append(listItem);