按钮/开关在jquery中不起作用

Question

所以我想弄清楚为什么我的按钮在我正在制作的清单应用程序上不起作用。其想法是，您输入文本字段，用deleteBtn删除它，并且应该能够在单击doneBox时遍历文本。

目前，所有元素都被添加到我的HTML中的表中，但删除按钮没有任何作用，选中已完成框也不会触发任何

这是JS：

  $(document).ready(function() {
  $(document).on("click",".btn-danger", function(){
    $(this).parent().parent().remove;
      });
  $(".btn-primary").on("click", function(e) {
    e.preventDefault();
    var newThing = $("#newThing").val().trim();
    var newRow = $("<tr>");
    var deleteBtn = $("<button>").addClass("btn btn-danger").append("Delete");
    var doneBox = $("<input>").attr("type", "checkbox").attr("class", "doneBox").attr("data-state", "not-checked");
    var toDoThis = $("<td>").addClass("word-td").append(newThing).append(deleteBtn).prepend(doneBox)
    newRow.append(toDoThis);
    $("tbody").append(newRow);
    $("#newThing").val("").focus();
  }); 
  $(document).on("click", ".doneBox", function(){
    var status = $(this).attr("data-state");
    if (status === "not-checked"){
      $(this).parent().attr("class", "done");
      $(this).attr("data-state", "checked")
    }
    else{
      $(this).parent().removeClass();
      $(this).attr("data-state", "not-checked");
    }
  });
});

css只是".done"类

Answer 1

代码的第3行中缺少括号。

$(this).parent().parent().remove();

Answer 2

Ranakrunal9的答案似乎是正确的，但以下是更有效地编写的全部内容：

$(function($) {
    $(document).on('click', '.btn-danger', function() {
        $(this).closest('tr').remove();
    });
    $(".btn-primary").on('click', function(e) {
        e.preventDefault();
        var newThing = $('#newThing');
        $('<tr><td class="word-td"><input type="checkbox" class="doneBox" />' + newThing.val().trim() + '<button class="btn btn-danger">Delete</button></td></tr>').appendTo('tbody'));
        newThing.empty().focus();
    }); 
    $(document).on('click', '.doneBox', function() {
        if ($(this).is(':checked')) {
            $(this).closest('td').addClass('done');
        } else {
            $(this).closest('td').removeClass();
        }
    });
});