Q:

not able to delete the index from the array and make it available again for new inputs

<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>

Here is my html file 

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

 });

Here is my js file. I put a limit up to max 10 inputs from the users and It works as it is but when I remove som values through remove button, the index of that values doesn't remove from the array and make it available again for inputs. Is there anyway I can fix this? 

A:

You are not limiting the list to 10 items, but to 11 items. Use the <= operator (<= 10) or < 11 to limit it to 10 items.
You are adding items to your array, even if the text is empty or the list is already full. Move myTaskArray.push() to the else statement.
You are never updating your myTaskArray array when deleting a todo list item. See my code example for how to do this using Array.prototype.filter().

(For demonstration purposes, I limited the list to 3 items and added logging of the underlying array when adding or removing a list item)

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


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


    if (myTaskArray.length >= 3) {
      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 {
      myTaskArray.push(newItem);
      console.clear();
      console.log("myTaskArray:", myTaskArray);
      $("#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() {
    let itemsToRemove = [];
    $('#list').children().filter(function(index) {
      let removeThis = this.firstChild.checked;
      if (removeThis) {
        itemsToRemove.push(index);
      }
      return removeThis;
    }).remove();
    myTaskArray = myTaskArray.filter(function(value, index) {
      return !itemsToRemove.includes(index)
    });
    console.clear();
    console.log("myTaskArray:", myTaskArray);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">x</i></button>
  </div>
</form>
<!-- these line breaks are only added so the console doesn't overlay the UI in the stack snippet preview -->
<br><br><br><br><br>

Some followup thoughts:

Usability: Allow adding an item using the enter key in the input (currently that submits the form)
Usability: Disable the input field when the list is full, displaying an info message or at least changing the input placeholder text instead of allowing the user to type, but showing the error message upon input and erasing the user's input completely
Maybe use a reactive framework like Vue.js that uses the underlying array for rendering the list instead of having to update both data and representation manually.

