使用javascript从数据库中删除

Question

我在我构建的待办事项列表应用程序中添加了删除功能。删除功能有效;但是，当我刷新页面时，我删除的所有项目都会返回。如何从数据库中永久删除项目？

＆＃13;

＆＃13;

 $(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
        }
    });
    
});
  

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

    
 $(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();
       }
      });
    });
       
       
       
});
  

＆＃13;

＆＃13;

＆＃13;

我更改了代码，但我不确定如何正确提取网址。