JavaScriptからデータベースから削除

Question

私が作成したToDoリストアプリに削除機能を追加しました。 delete関数は機能します。ただし、ページを更新すると、削除したアイテムがすべて戻ってきます。アイテムをデータベースから永久に削除するにはどうすればよいですか？

$(function() { 
 

 
    // The taskHtml method takes in a JavaScript representation 
 
    // of the task and produces an HTML representation using 
 
    // <li> tags 
 
    function taskHtml(task) { 
 
     var checkedStatus = task.done ? "checked" : ""; 
 
     var liClass = task.done ? "completed" : ""; 
 
     var liElement = '<li id="listItem-' + task.id +'" class="' + liClass + '">' + 
 
     '<div class="view"><input class="toggle" type="checkbox"' + 
 
     " data-id='" + task.id + "'" + 
 
     checkedStatus + 
 
     '><label>' + 
 
     task.title + 
 
    // '<button class="deletebutton" type="button">Delete</button>' + 
 
     '</label></div></li>'; 
 

 
     return liElement; 
 
    } 
 
    // toggleTask takes in an HTML representation of the 
 
    // an event that fires from an HTML representation of 
 
    // the toggle checkbox and performs an API request to toggle 
 
    // the value of the `done` field 
 
    function toggleTask(e) { 
 
     var itemId = $(e.target).data("id"); 
 

 
     var doneValue = Boolean($(e.target).is(':checked')); 
 

 
     $.post("/tasks/" + itemId, { 
 
     _method: "PUT", 
 
     task: { 
 
      done: doneValue 
 
     } 
 
     }).success(function(data) { 
 
     var liHtml = taskHtml(data); 
 
     var $li = $("#listItem-" + data.id); 
 
     $li.replaceWith(liHtml); 
 
     $('.toggle').change(toggleTask); 
 
     }); 
 
    
 
    } 
 

 
    $.get("/tasks").success(function(data) { 
 
     var htmlString = ""; 
 

 
     $.each(data, function(index, task) { 
 
     htmlString += taskHtml(task); 
 
     }); 
 
     var ulTodos = $('.todo-list'); 
 
     ulTodos.html(htmlString); 
 

 
     $('.toggle').change(toggleTask); 
 

 
    }); 
 
    
 
    $('#new-form').submit(function(event) { 
 
     event.preventDefault(); 
 
     var textbox = $('.new-todo'); 
 
     var payload = { 
 
     task: { 
 
      title: textbox.val() 
 
     } 
 
     }; 
 
     
 
     $.post("/tasks", payload).success(function(data) { 
 
     var htmlString = taskHtml(data); 
 
     var ulTodos = $('.todo-list'); 
 
     ulTodos.append(htmlString); 
 
     $('.toggle').click(toggleTask); 
 
     $('.new-todo').val(''); 
 
     }); 
 
    }); 
 
    
 
    //////this section works 
 
    $("#deletebutton").on("click", function() { 
 
     $(".todo-list li.completed").remove() 
 
     
 
    ///////this does not want to remove the item from the database 
 
     $.destroy("/tasks/" + itemId, { 
 
     _method: "destroy", 
 
     task: { 
 
      done: doneValue 
 
     } 
 
    }); 
 
    
 
}); 
 

Answer 1

 
 
$(function() { 
 
    // The taskHtml method takes in a JavaScript representation 
 
    // of the task and produces an HTML representation using 
 
    // <li> tags 
 
    function taskHtml(task) { 
 
     var checkedStatus = task.done ? "checked" : ""; 
 
     var liClass = task.done ? "completed" : ""; 
 
     var liElement = '<li id="listItem-' + task.id +'" class="' + liClass + '">' + 
 
     '<div class="view"><input class="toggle" type="checkbox"' + 
 
     " data-id='" + task.id + "'" + 
 
     checkedStatus + 
 
     '><label>' + 
 
     task.title + 
 
    // '<button class="deletebutton" type="button">Delete</button>' + 
 
     '</label></div></li>'; 
 
     return liElement; 
 
    } 
 
    // toggleTask takes in an HTML representation of the 
 
    // an event that fires from an HTML representation of 
 
    // the toggle checkbox and performs an API request to toggle 
 
    // the value of the `done` field 
 
    function toggleTask(e) { 
 
     var itemId = $(e.target).data("id"); 
 
     var doneValue = Boolean($(e.target).is(':checked')); 
 
// still dont understand this 
 
     $.post("/tasks/" + itemId, { 
 
     _method: "PUT", 
 
     task: { 
 
      done: doneValue 
 
     } 
 
     }).success(function(data) { 
 
     var liHtml = taskHtml(data); 
 
     var $li = $("#listItem-" + data.id); 
 
     $li.replaceWith(liHtml); 
 
     $('.toggle').change(toggleTask); 
 
     }); 
 
    
 
    } 
 
    $.get("/tasks").success(function(data) { 
 
     var htmlString = ""; 
 
     $.each(data, function(index, task) { 
 
     htmlString += taskHtml(task); 
 
     }); 
 
     var ulTodos = $('.todo-list'); 
 
     ulTodos.html(htmlString); 
 
     $('.toggle').change(toggleTask); 
 
    }); 
 
    
 
    $('#new-form').submit(function(event) { 
 
     event.preventDefault(); 
 
     var textbox = $('.new-todo'); 
 
     var payload = { 
 
     task: { 
 
      title: textbox.val() 
 
     } 
 
     }; 
 
     
 
     $.post("/tasks", payload).success(function(data) { 
 
     var htmlString = taskHtml(data); 
 
     var ulTodos = $('.todo-list'); 
 
     ulTodos.append(htmlString); 
 
     $('.toggle').click(toggleTask); 
 
     $('.new-todo').val(''); 
 
     }); 
 
    }); 
 
    
 
    
 
    $("#deletebutton").on("click", function() { 
 
     $(".todo-list li.completed").remove() 
 
     
 
    
 
     var li_to_delete = $('.todo-list li.completed'); 
 
     
 
     $.ajax({ 
 
     type: 'DELETE', 
 
     url: "/tasks" + li_to_delete, 
 
     success: function(){ 
 
     li_to_delete.remove(); 
 
     } 
 
     }); 
 
    }); 
 
     
 
     
 
     
 
}); 
 

私は適切にURLを抽出する方法がわからないコードが、イムを変更しました。