jquery - 删除我刚刚使用 Ajax - MVC3 添加的元素（来自客户端和服务器）

Question

我有一个视图，我将一些元素添加到数据库中的表中；让我们称表学生。在视图中，我还可以选择将一些书籍分配给要添加到表中的学生。我已经用 Ajax 做到了这一点。

演示：

    Name of Student: ...
    Books : <here is a drop down> ( from database)    < here is a button> (add button)

    <ul>
   When I click the button here I append some books. I also retain on Session the id of every book ( in a list and when I click submit I send that list to the server )
    </ul>
[Submit button]

问题是我也想像这样添加一个删除按钮：

    Name of Student: ...

    Books : <here is a drop down>     < here is a button> 

    <ul>
    Book1  delete
    Book2  delete
    </ul>
[Submit button]

当我单击删除按钮从列表和会话中删除该元素时。

这是我的代码：

• 视图中的脚本

  $(function () {
  
      $("#add").click(function () {
  
          //items.push($("#category").val());
          $.ajax({
              url: '@Url.Action("AddCategory")',
              type: "POST",
              dataType: "JSON",
              data: { id: $("#categoryId option:selected").val() },
              beforeSend: function () { },
              success: function (data) {
  
                  $("#toFill").append("<li>" + $("#categoryId option:selected").text() + " " + "<span style='cursor:pointer;' id='a'>" + "[X]" + "</span>" + " " + "</li>");
              },
              error: function () { alert("error") }
  
          })
          $("#toFill #a").click(function () {
  
              $.ajax({
                  url: '@Url.Action("DeleteCat")',
                  type: "POST",
                  dataType: "JSON",
                  data: { id: $("#categoryId option:selected").val() },
                  beforeSend: function () { },
                  succes: function (data) {
                      // $("li").remove();
                      alert("lala"); return false;
                  },
                  error: function () { alert("error at delete") }
  
  
  
              })
  
          });
      })
  

• AddCategory并DeleteCat从控制器：

  public ActionResult AddCategory(int id)
  {
      Session.Category.Add(id);
      return Json(id, JsonRequestBehavior.AllowGet);
  }
  
  public ActionResult DeleteCat(int id)
  {
      Session.Category.Remove(id);
      return Json(id, JsonRequestBehavior.AllowGet);
  }
  

Answer 1

如果您有一个直接作用于下拉列表的删除按钮，那么它会更合乎逻辑且更易于遵循、使用和编程 - 即在下拉列表中选择一个项目并单击删除以删除所选项目。