Question 172776 in Html Question posted in
Some basic documentation can be found here.

Can JavaScript delete only the selected user input and not the entire HTML block?

I am having problems trying to figure out how to delete one specific user input instead of the entire HTML block. I am aware that the delete button fires on the HTML ID ‘noteDelete’ which is the parent of each user input, however I’m not sure how to set a specific ID for each user input. If that is the solution. For each user input would a new ID have to be created in order for the delete button to fire on each input? Here’s the code:

//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>
Tags:

2

Answers


  1. 0

    So the problem you are having is that you will be having multiple notes, each having its own delete button. First, don’t use an Id on the button because every time a note is added, two or more buttons will have the same Id. Instead, you can use a class on the delete button, for example, <button class="delete-note-btn>delete note</button> Then you can use event delegation to target a parent element (or so) that exists in the HTML file. something like this.

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

    Hope it helps.

    Login or Signup to reply.
  2. 0

    You don’t need to use IDs at all. You can benefit from the Event parameter of triggering an EventListener to identify which note you’re modifying. Specifically, since you’re essentially deleting the div that is the direct parent of the delete button the user is clicking, you can identify that element using e.currentTarget.parentNode.remove();.

    This will guarantee that only the note you are clicking gets deleted without affecting the rest or worrying about finding the correct id.

    It’s also worth mentioning that no two elements should ever have the same id, so in situations where you might want to delete/query multiple elements, it’s better to use a class like @ismail suggested in his answer.

    working snippet:

    //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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search