JavaScript：只删除选定的用户输入，而不是整个HTML块

juud5qan 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(111)

我在试图弄清楚如何删除一个特定的用户输入而不是整个HTML块时遇到了问题。我知道删除按钮会在HTMLID 'noteDelete'上触发，它是每个用户输入的父项，但我不确定如何为每个用户输入设置特定的ID。如果这是解决办法的话。对于每个用户输入，是否必须创建一个新的ID，以便在每个输入上触发删除按钮？代码如下：

//Event Targets
let titleArea = document.getElementById('title')
let noteArea = document.getElementById('note')
let submitNoteButton = document.getElementById('addNote')
let noteSum = document.getElementById('noteValue')
//let noteDeleteButton = document.querySelectorAll('noteDelete')
//let deleteNoteButton = document.getElementById('noteDelete')
let viewNoteButton = document.getElementById('viewNote')


//Event Handlers
submitNoteButton.addEventListener('click', () => {
  let listTitle = title.value
  let noteInput = noteArea.value
  let listNote = document.createElement('div')
  let noteDelete = document.createElement('button')
  noteDelete.innerHTML = 'Delete'
  noteDelete.setAttribute('id', 'noteDelete')
  //listNote.classList.add('listNote')
  if (listTitle) {
    listNote.innerHTML =
      `<h3>${listTitle}</h3>
        <p>${noteInput}</p>
        <button type="button" id="deleteNote" form="delete">Delete</button>
        <button type="button" id="viewNote" form="view">View</button>`
  }
  noteSum.appendChild(listNote)
  noteSum.appendChild(noteDelete)
  noteArea.value = ""
  titleArea.value = ""

  let deleteNoteButton = document.getElementById('noteDelete')
  deleteNoteButton.addEventListener('click', () => {
    let deleteValue = document.querySelector('noteDelete')
    deleteValue.remove()
  })

})

<body>
  <section class="inputField">
    <h1>Note Taker</h1>
    <h3>Add A New Note:</h3>
    <form id="inputText">
      <div>
        <label for="title">Title:</label>
        <input type="text" name="title" id="title">
      </div>

      <div>
        <label for="note">Note:</label>
        <textarea id="note" name="note" rows="2" cols="100"></textarea>
      </div>
    </form>
    <button type="button" id="addNote" form="note">Add Note</button>
  </section>
  <section class="outputField">
    <form id="outputValue">
      <div id="noteValue">
        <!--<h3>Title</h3>
                <p>I would like to buy a AMMMBURGER!</p>
                <button type="button" id="deleteNote" form="delete">Delete</button>
                <button type="button" id="viewNote" form="view">View</button>-->
      </div>
    </form>
  </section>

JavaScript

来源：https://stackoverflow.com/questions/76295374/javascript-delete-only-the-selected-user-input-and-not-the-entire-html-block

2条答案

按热度按时间

jdgnovmf1#

因此，您遇到的问题是，您将有多个笔记，每个笔记都有自己的删除按钮。首先，不要在按钮上使用ID，因为每次添加注解时，两个或多个按钮将具有相同的ID。相反，您可以在删除按钮上使用一个类，例如<button class="delete-note-btn>delete note</button>然后您可以使用事件委托来定位HTML文件中存在的父元素（或左右）。就像这样

const notesList = document.querySelector(".note-list") // The container element where your notes will be stored.

notesList.addEventListener("click", (e) => {
    if (e.target.classList.contains('delete-note-btn') { // the element clicked is the delete note button
    // Delete the specific note
    // assuming the note is the delete button's parent element then we can select it like this
    let note = e.target.parentElement
    // remove (delete) the note
    note.remove()  
}
})

希望能帮上忙。

赞(0）回复(0）举报 2023-05-21

tag5nh1u2#

您根本不需要使用ID。您可以使用Event参数触发EventListener来识别正在修改的音符。具体来说，由于实际上删除的div是用户单击的delete button的直接父元素，因此可以使用e.currentTarget.parentNode.remove();来标识该元素。
这将确保只有您单击的注解被删除，而不会影响其余注解或担心找到正确的id。
同样值得一提的是，任何两个元素都不应该有相同的id，所以在你可能想删除/查询多个元素的情况下，最好使用一个类，比如@ismail在他的回答中建议的。
工作片段：

//Event Targets
let titleArea = document.getElementById('title');
let noteArea = document.getElementById('note');
let submitNoteButton = document.getElementById('addNote');
let noteSum = document.getElementById('noteValue');
let viewNoteButton = document.getElementById('viewNote');

//Event Handlers
submitNoteButton.addEventListener('click', () => {
  let listTitle = title.value;
  let noteInput = noteArea.value;
  let listNote = document.createElement('div');

  let noteDelete = document.createElement('button');
  noteDelete.innerHTML = 'Delete';

  if (listTitle) {
    listNote.innerHTML =
      `<h3>${listTitle}</h3>
            <p>${noteInput}</p>
            <button type="button" form="view">View</button>`
  }

  noteSum.appendChild(listNote);

  noteArea.value = "";
  titleArea.value = "";

  noteDelete.addEventListener('click', (e) => {
    e.target.parentNode.remove();
  });
  listNote.appendChild(noteDelete);
})

<body>
  <section class="inputField">
    <h1>Note Taker</h1>
    <h3>Add A New Note:</h3>
    <form id="inputText">
      <div>
        <label for="title">Title:</label>
        <input type="text" name="title" id="title">
      </div>

      <div>
        <label for="note">Note:</label>
        <textarea id="note" name="note" rows="2" cols="100"></textarea>
      </div>
    </form>
    <button type="button" id="addNote" form="note">Add Note</button>
  </section>
  <section class="outputField">
    <form id="outputValue">
      <div id="noteValue">
      </div>
    </form>
  </section>
</body>

赞(0）回复(0）举报 2023-05-21

我来回答

JavaScript：只删除选定的用户输入，而不是整个HTML块

2条答案

相关问题

热门标签

最新问答