Как я могу решить это свойство Null в Javascript?

Вместо того, чтобы запрашивать и добавлять событие к объекту кнопок попробуйте цепочку внутри загрузки документа.

window.onload = function () {
    document.querySelector('.btn-danger').addEventListener('click', liDel);
};

Приведенный выше код должен работать!

Причина, по которой вы получаете нулевую ошибку, заключается в том, что;

• Вы присвоили переменную buttons еще не существующему узлу. (Обратите внимание, что кнопка создается после загрузки страницы, что означает, что .btn-danger еще не был создан в то время).
• Согласно MDN метод querySelector выполняет следующие функции:

  The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

На основе кода, который у вас есть в скрипке, вот руководство для достижения желаемых результатов.

Прежде всего, избавьтесь от глобальной переменной li в строке 6. Причина в том, что если вы создаете новый li из ввода, он будет отображаться в той же строке, потому что он все еще ссылается на тот же узел элемента (Я уверен, ты понял это)

затем в вашей функции createListElement выполните команду ff

function createListElement() {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(input.value));
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("Delete"));
  btn.classList.add("btn", "btn-danger","btn-sm");
  btn.addEventListener('click', function(e){
    if (!e) e = window.event;
    try{
      ul.removeChild(this.parentNode)
    }catch(err){
      alert(err.message)
    }
  })
  li.appendChild(btn)
  ul.appendChild(li);
  input.value = "";
}

Затем, когда вы создаете кнопки, вы должны прикрепить к ним функцию прослушивателя событий. Итак, вы выполняете ff в своей функции createbtn:

// To create a button 
function createbtn() {
    for (var i = 0; i < list.length; i++) {
      var btn = document.createElement("button");
      btn.appendChild(document.createTextNode("Delete"));
      btn.classList.add("btn", "btn-danger","btn-sm");
      btn.addEventListener('click', function(e){
        if (!e) e = window.event;
        try{
          ul.removeChild(this.parentNode)
        }catch(err){
          alert(err.message)
        }
      })
      list[i].appendChild(btn);
    }
}

в любом случае есть более эффективные способы сделать это. Но это быстрая работоспособная модель, основанная на коде в вашей скрипке.

Спасибо всем, я нашел решение после прочтения всех ваших ответов: Сначала избавился от следующего:

var buttons = document.querySelector (".btn-danger");
var li = document.createElement("li")

Затем создайте эту функцию для удаления "li" Используя "это", вы избегаете ошибки, потому что у вас нет ссылки, потому что при этом вам все равно, что это за элемент, вы только сейчас что-то есть и берете его для всего, что вам нужно.

function liDel(){
    ul.removeChild(this.parentNode);
}

и поместите это в createBtn, чтобы удалить существующий "li" в html:

btn.addEventListener('click', liDel);

затем поместите это в createElement, чтобы сделать то же самое, что и выше, но для нового li, созданного с помощью DOM:

btn.addEventListener('click', liDel);
li.appendChild(btn);

И на этом проблемы были решены.

Еще раз спасибо, и вы можете увидеть, как страница работает на рабочий пример