Estoy haciendo esto para practicar. Quiero hacer una pequeña aplicación que lleve un registro de los gastos. Contiene dos entradas de texto y una entrada de fecha, además de un botón para agregar el valor de cada uno en la pantalla. Escribes el lugar donde gastaste el dinero, la fecha y la cantidad y aparece abajo como una lista desordenada más un botón para borrar toda la entrada.

¿Cómo puedo tener una lista desordenada que contiene tres artículos li? Intenté crear varias listas y agregarlas a la lista o entre sí. Funcionó hasta cierto punto, sin embargo, el botón Eliminar solo eliminó la última entrada de entrada, la cantidad. Si lo agregué a la lista, eliminó todo el elemento ul, por lo que solo se pudo hacer una vez al intentarlo.

Mi código en este momento cuando volví a donde comencé:

HTML

 <div class=""> <input type="text" placeholder="Where was the expense made?" class="place"> <input type="date" class="date"> <input type="text" class="amount"> <input type="button" value="Add Expense" class="addBtn"> </div> <ul class="list"></ul>

JS

 function addStuff() { const place = placeInput.value; const date = dateInput.value; const amount = amountInput.value; const btn = document.createElement('button'); btn.type = 'button'; btn.textContent = 'X'; btn.addEventListener("click", (e) => deleteExpense(e)); const li = document.createElement('li'); li.textContent = `${place}`; li.appendChild(btn); list.appendChild(li); }