¿Cómo puedo hacer que mi lista de tareas pueda editar la entrada a través del botón de edición usando jquery? Es una lista de tareas pendientes y quiero que los usuarios puedan editar la entrada. Gracias de antemano.
<header data-role="header"> <h1>To Do List</h1> <a href="#">Home</a> </header> <div role="main" class="todo- container"> <div class="input"> <input type="text" class="note" placeholder="Input new note.."> <button id="addButton">Add</button> </div> <ul class="todo-list"> <li> <div class="button-center"> </div> </li> </ul> <script> $(document).ready(function() { $('#addButton').click(function() { var task = $(".note").val(); $(".todo-list").append(`<li> <span>Task: ${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButtton">Edit</button> </div></li>`); $(".note").val(""); }); $(document).on('click', '.deleteButton', function() { $(this).parent().parent().remove(); }); }); $('#editButton').click(function() {}); </script>He hecho algo como esto: ejemplo
el usuario podrá editar haciendo doble clic en el texto y aparecerá un campo de entrada. el usuario puede hacer clic en el botón editar una vez que haya terminado de editar y el texto se actualizará.
JS
$('#addButton').click(function() { var task = $(".note").val(); $(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButton">Edit</button> </div></li>`); $(".note").val(""); }); $(document).on('click', '.deleteButton', function() { $(this).parent().parent().remove(); }); $(document).on('dblclick', '.task', function() { var task = $(this).text(); $(this).text(''); $(this).append(`<input type="text" value="${task}" />`); }); $(document).on('click', '.editButton', function() { var task = $(this).parents().siblings('span').children('input').val(); $(this).parents().siblings('span').remove('input'); $(this).parents().siblings('span').text(task); });Modifiqué su código y agregué la funcionalidad de edición. Se supone que funciona como es de esperar, así que no diré mucho. Por favor prueba esto
$(document).ready(function() { var $note = $('.note'); var $taskId = $('.task-id'); $('#addButton').click(function() { var task = $note.val().trim(); var id = $taskId.val(); if( task.trim() === '' ){ // do nothing }else if( id !== '' ){ // edit $(".todo-list").find('[data-id="'+id+'"] .task').text(task); }else{ // add todo id = new Date().getTime(); // you can make it more unique $(".todo-list").append(` <li data-id="${id}"> <span class="task">${task}</span> <div class="button-center"> <button class="deleteButton">Delete</button> <button class="editButton">Edit</button> </div> </li> `); } $note.val('').focus(); $taskId.val(''); $(this).text('Add'); }); // delete and edit action $(document).on('click', '.deleteButton', function() { $(this).closest('li').remove(); }).on('click', '.editButton', function(){ let $li = $(this).closest('li'); $note.val( $li.find('.task').text() ); $taskId.val( $li.data('id') ); $('#addButton').text('Update'); }); // cancel update if .note text is cleared $('.note').on('input', function(){ if( $(this).val() === '' ){ $taskId.val('').focus(); $('#addButton').text('Add'); } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input"> <input type="text" class="note" placeholder="Input new note.."> <input type="hidden" class="task-id"> <button id="addButton">Add</button> </div> <ul class="todo-list"></ul>