Edit button jquery function

user_18131775 0
Viewed 279

How do I make my to do list able edit input through the edit button using jquery? It is a to do list and i want users to be able to edit the input Thanks in advance

<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>
jquery javascript
2 Answers

I have done something like this : example

user will be able to edit by double click at the text and an input field will showed up. user can click the edit button once he/she finished edit and the text will be updated.

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);
});
user_98265760

I've modify your code and added the edit functionality. It's supposed to work as you will expect so I will not say much. Kindly try this

$(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>

user_62142100
Related