在不刷新页面并重试ES6的情况下无法删除新创建的列表项

Question

一些背景信息：我正在尝试完成我的最小笔记应用程序的删除功能的构建。

每次创建新笔记时，它都会出现在笔记列表的末尾。 但是，如果我尝试删除新创建的便笺，它将无法正常工作。 我必须刷新页面，然后再试一次以使其正常工作。

我不断收到以下两个错误：

“未捕获的TypeError：无法在HTMLUListElement读取null的属性'parentNode'。”

“删除http：// localhost：3000 / api / v1 / notes / undefined 404（未找到）”

否则，我可以毫无问题地删除其他注释。

这是我的js代码：

  // display list of notes on the side const noteContainer = document.querySelector(".column is-one-quarter") const noteList = document.querySelector(".menu-list") fetch('http://localhost:3000/api/v1/notes') .then(function(response) { return response.json(); }) .then(function(notes) { notes.forEach(function(note) { noteList.innerHTML += `<li id="list-item" data-id=${note.id}><a id="note" data-id=${note.id} class="menu-item">${note.title}</a><i id="delete" data-id=${note.id} class="fas fa-minus-circle has-text-grey-light hvr-grow"></i></li>` }) }) // display details of each note const noteDetail = document.querySelector(".note-detail") noteList.addEventListener('click', function(event) { if (event.target.className === "menu-item") { fetch(`http://localhost:3000/api/v1/notes/${event.target.dataset.id}`) .then(function(response) { return response.json() }) .then(function(note) { noteDetail.innerHTML = `<h1 contenteditable="true" id="title" data-id=${note.id} class="subtitle is-2">${note.title}</h1><p contenteditable="true" id="body" data-id=${note.id} class="subtitle is-6">${note.body}</p><a id="save" data-id=${note.id} class="button is-small">Save</a>` }) } }) // i should be able to edit the title and body of a note when i click // on it and it should save when i click on the button. noteDetail.addEventListener('click', function(event) { if (event.target.id === "save") { const noteId = event.target.dataset.id const editTitleInput = document.querySelector(`h1[data-id="${noteId}"]`) const editBodyInput = document.querySelector(`p[data-id="${noteId}"]`) const singleNote = document.querySelector(`a[data-id="${noteId}"]`) fetch(`http://localhost:3000/api/v1/notes/${noteId}`, { method: "PATCH", headers: { 'Content-Type': 'application/json', 'Accepts': 'application/json' }, body: JSON.stringify({ title: editTitleInput.innerText, body: editBodyInput.innerText }) }).then(function(response) { return response.json() }).then(function(note) { singleNote.innerText = editTitleInput.innerText }) } }) // when i click on the button, a form with a title and body input // should display on the right. const newNoteButton = document.querySelector("#create") newNoteButton.addEventListener('click', function(event) { fetch("http://localhost:3000/api/v1/notes") .then(function(response) { return response.json() }) .then(function(note) { noteDetail.innerHTML = `<input id="title" class="input subtitle is-5" type="text" placeholder="Title"> <textarea id="body" class="textarea subtitle is-5" placeholder="Body" rows="10"></textarea><a id="add" class="button has-text-black" style="margin-left: 594px;">Add Note</a>` // when i click on 'add button', a new note with a title and body // should be created and added to the list of notes. const noteTitleInput = document.querySelector("#title") const noteBodyInput = document.querySelector("#body") const addNoteButton = document.querySelector("#add") addNoteButton.addEventListener('click', function(event) { // event.preventDefault() fetch('http://localhost:3000/api/v1/notes', { method: "POST", headers: { 'Content-Type': 'application/json', 'Accepts': 'application/json' }, body: JSON.stringify({ title: noteTitleInput.value, body: noteBodyInput.value }) }).then(function(response) { return response.json() }).then(function(note) { noteList.innerHTML += `<li data-id=${note.id}><a id="note" data-id=${note.id} class="menu-item">${note.title}</a><i id="delete" class="fas fa-minus-circle has-text-grey-light hvr-grow"></i></li>` }) }) }) }) // i should be able to delete a note when i click on the button. noteList.addEventListener('click', function(event) { // event.preventDefault() if (event.target.id === "delete") { const noteId = event.target.dataset.id // const noteListItem = document.querySelector("#list-item") const noteListItem = document.querySelector(`li[data-id="${noteId}"]`) const singleNote = document.querySelector(`a[data-id="${noteId}"]`) fetch(`http://localhost:3000/api/v1/notes/${noteId}`, { method: "DELETE", }) // debugger // lastNote = noteList.lastElementChild // noteList.removeChild(lastNote) // singleNote.parentElement.remove() noteListItem.parentNode.removeChild(noteListItem) noteDetail.innerHTML = "" } }) 

这是我的html代码：

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"> <link href="css/hover.css" rel="stylesheet" media="all"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <link rel="stylesheet" href="css/note.css"> <meta charset="utf-8"> <title></title> </head> <body> <h1 class="title is-1">Jot</h1> <div class="columns"> <div class="column is-one-quarter"> <p class="menu-label" style="font-size:15px;"> Notes <i id="create" class="fas fa-plus-circle has-text-grey-light hvr-grow" style="margin-left: 10px; width: 20px; height: 30px; font-size: 24px;"></i> </p> <ul class="menu-list"> </ul> </div> <div class="column is-three-fifths"> <div class="note-detail"> </div> </div> <div class="column"> </div> </div> <script src="index.js"></script> </body> </html> 

任何帮助将不胜感激。 :)

Answer 1

您在以下两行上嵌套了字符串：

const noteListItem = document.querySelector(`li[data-id="${noteId}"]`)
const singleNote = document.querySelector(`a[data-id="${noteId}"]`)

您的模板文字会创建一个字符串，并将其放在引号内。 例如，如果您的noteId为12 。 您的代码最终像这样结束：

const noteListItem = document.querySelector("li[data-id="'12'"]")
const singleNote = document.querySelector("a[data-id="'12'"]")

我不是100％肯定这是您的问题，但这是我突然想到的第一件事。

您可以签出MDN来重新编写Template文字（Template字符串） 。