Javascript 按钮/切换在jquery中不起作用

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

目前，所有元素都被添加到我的HTML中的表中，但是delete按钮没有任何作用，选中done框也没有任何作用

以下是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");
    }
  });
});

$（文档）.ready（函数（）{
$（文档）.on（“单击“，”.btn danger”，函数（）{
$（this）.parent（）.parent（）.remove；
});
$（“.btn primary”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var newThing=$（“#newThing”）.val（）.trim（）；
var newRow=$（“”）；
var deleteBtn=$（“”）。addClass（“btn btn危险”）。append（“Delete”）；
var doneBox=$（“”）.attr（“类型”，“复选框”）.attr（“类”，“doneBox”）.attr（“数据状态”，“未选中”）；
var toDoThis=$（“”）.addClass（“word td”）.append（newThing）.append（deleteBtn）.prepend（doneBox）
newRow.append（toDoThis）；
$（“tbody”）。追加（新行）；
$（“#newThing”）.val（“”.focus（）；
}); 
$（document）.on（“click”，“.doneBox”，function（））{
var status=$（this.attr（“数据状态”）；
如果（状态==“未检查”）{
$（this.parent（）.attr（“class”，“done”）；
$（this.attr（“数据状态”，“选中”）
}
否则{
$（this.parent（）.removeClass（）；
$（this.attr（“数据状态”，“未选中”）；
}
});
});

---

css只是“.done”类的文本装饰

代码第3行缺少括号

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

---

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

$（函数（$）{
$（文档）.on（'click'，'.btn danger'，函数（）{
$（this）.closest（'tr'）.remove（）；
});
$（“.btn primary”）。在（'click'，函数（e）{
e、 预防默认值（）；
var newThing=$（“#newThing”）；
$（''+newThing.val（）.trim（）+'Delete'）.appendTo（'tbody'）；
newThing.empty（）.focus（）；
}); 
$（文档）.on（'单击'，'.doneBox'，函数（）{
如果（$（this）.is（':checked'））{
$（this）.closest（'td'）.addClass（'done'）；
}否则{
$（this）.closest（'td'）.removeClass（）；
}
});
});

您也可以添加HTML吗？尝试从选择器中删除尖括号-tr而不是instanceRather，尝试关闭它们，或者像

，或者最好像

@CBMoate，我爱诚实：-）@Roamer-1888:使用您建议的方法。节省了许多线路。非常感谢