Javascript 无法从数组中删除索引并使其再次可用于新输入我的任务清单_Javascript_Jquery_Arrays

Javascript 无法从数组中删除索引并使其再次可用于新输入我的任务清单

javascript jquery arrays

Javascript 无法从数组中删除索引并使其再次可用于新输入我的任务清单,javascript,jquery,arrays,Javascript,Jquery,Arrays,这是我的html文件 <body class="container-fluid"> <div class="container"> <h1 id = "changeBg" title = "Click here to change the background"> My To-do List </h1> <form> <div class = "inputList">

这是我的html文件

<body class="container-fluid">
    <div class="container">

        <h1 id = "changeBg" title = "Click here to change the background"> My To-do List </h1>

        <form>
        <div class = "inputList">
         <input type="text" id="inputUser" placeholder="Type your task here - minimum four characters"
                class="textfield">
         <ul id="list"> </ul>
         </div>
        <div class = "myBtn"> 
        <button type= "button"  id ="addBtn" title = "Add Task"><i class="fas fa-plus"></i></button>
        <button type= "button"  id ="removeBtn"><i class="fas fa-trash-alt"></i></button>

        </form>
         </div>


$（函数（）{
var myTaskArray=[]；
$（“#添加BTN”）。单击（函数（）{
var newItem=$（'#inputUser'）.val（）；
myTaskArray.push（newItem）；
如果（myTaskArray.length>10）{
提醒（“您今天的日程已满！”）；
$（'#inputUser'）.val（''）；
返回；
}else if（newItem.trim（）=“”| | newItem.length<3）{
警报（“您需要编写任务”）；
}否则{
$（“#列表”）。追加（“”+“+newItem+””）；
$（“输入：复选框”）。单击（函数（）{
var$this=$（this）；
如果（选中此项）{
$this.parent（）.addClass（'completed'）；
}否则{
$this.parent（）.removeClass（'completed'）；
}
});
}
$（'#inputUser'）.val（''）；
});
//删除列表中的项目
$（“#removeBtn”）。单击（函数（）{
$（'#list'）.children（）.filter（函数（）{
返回此.firstChild.checked；
}).remove（）；
});
});

这是我的js文件。我对用户最多10个输入设置了一个限制，但当我通过remove按钮删除som值时，该值的索引不会从数组中删除，并使其再次可用于输入。还有什么我可以解决的吗

您没有将列表限制为10项，而是限制为11项。使用

“当我通过移除按钮移除一些值时，该值的索引不会从数组中移除”-因为你没有任何从数组中移除的js代码myTaskArray你也可以。按下新项，然后验证它，这样你就可以达到计划限制，而没有任何值出现在#列表中（如果他们都有错误）是的，我同意。我只过滤了选中复选框的列表。我实际上被卡住了。谢谢先生的建议和输入。非常感谢。这是我第一次听说vue.js框架。我一定会检查它。

 $(function () {
 var myTaskArray = [];


     $("#addBtn").click(function () {
         var newItem = $('#inputUser').val();
         myTaskArray.push(newItem);


         if (myTaskArray.length > 10) {
             alert("Your Schedule for today is now full!");
             $('#inputUser').val('');
             return;

         } else if (newItem.trim() == "" || newItem.length < 3) {
             alert("You need to write a task");

         } else {

             $("#list").append("<li><input type = 'checkbox' id = 'checkbox'>" + "  " + newItem + "</li>");

             $("input:checkbox").click(function () {
                 var $this = $(this);
                 if (this.checked) {
                     $this.parent().addClass('completed');

                 } else {
                     $this.parent().removeClass('completed');
                 }
             });
         }
         $('#inputUser').val('');
     });

     //remove item on the list
     $("#removeBtn").click(function () {
         $('#list').children().filter(function () {
             return this.firstChild.checked;
         }).remove();
     });

 });