How do I make my application understand which delete button I am clicking and delete the right list?

Question

I have an app that adds a list for the person to put a new schedule every time they click on a button, that new list comes with a delete button on the side, but when the person adds more than one list, and tries to delete the last one, it always deletes the first one that was included, it doesn’t seem to identify which button is being clicked.

The delete script is as follows:

function deleteField() {
  const fieldFather = document.querySelector('#schedule-items')
  const fieldSon = document.querySelector('#second-schedule-div')
  fieldFather.removeChild(fieldSon)
}

document.querySelector('.delete-button').addEventListener('click', deleteField)

and in the list that is added, the buttons have a "onClick='deleteField()'"

the code I use to add the Divs is: OBS.: the div that I clone, it is in HTML with display None

document.querySelector('#add-time')
  //quando clicar no botão chama o cloneField
  .addEventListener('click', cloneField)


function cloneField() {
  ?
  const newFieldContainer = document.querySelector('#second-schedule-div').cloneNode(true)
  
  const fields = newFieldContainer.querySelectorAll('input')
  
  fields.forEach(field => {
    field.value = ''
  });
  
  document.querySelector('#schedule-items').appendChild(newFieldContainer)
}

html code:

<fieldset id='schedule-items'>
          <legend>Horários disponíveis
            <button type='button' id='add-time'>+ Novo Horário</button>
          </legend>

          <div id='main-schedule-div' class="schedule-item">
            <div class="select-block">
              <label for="weekday">Dia da semana</label>
              <!--name no select dessa forma, diz ao back end que pode ter mais de um valor-->
              <select name="weekday[]">
                <option value="">Selecione uma opção</option>

                {%for weekday in weekdays %}
                <option value="{{loop.index0}}">
                  {{weekday}}
                </option>
                {%endfor%}

              </select>
            </div>
            <div class="input-block">
              <label for="time_from">Das</label>
              <input type="time" name='time_from[]' required>
            </div>
            <div class="input-block">
              <label for="time_to">Até</label>
              <input type="time" name='time_to[]' required>
            </div>
          </div>  


        </fieldset>

html from cloned div:

<div id='hidden-div'>
    <div id='second-schedule-div' class="schedule-item">
      <div class="select-block">
        <label for="weekday">Dia da semana</label>
        <!--name no select dessa forma, diz ao back end que pode ter mais de um valor-->
        <select name="weekday[]">
          <option value="">Selecione uma opção</option>

          {%for weekday in weekdays %}
          <option value="{{loop.index0}}">
            {{weekday}}
          </option>
          {%endfor%}

        </select>
      </div>
      <div class="input-block">
        <label for="time_from">Das</label>
        <input type="time" name='time_from[]' required>
      </div>
      <div class="input-block">
        <label for="time_to">Até</label>
        <input type="time" name='time_to[]' required>
      </div>
      <div id='div-button'>
        <button type='button' class='delete-button' onClick='deleteField()'>delete</button>
      </div>
    </div>
  </div>

application photo:

Answer 1

I believe the easiest way without changing your code too much is to search for the parent elements and remove. I changed the delete function.

   function deleteField(t) {
      t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode);
   }

On the button, pass yourself as parameter

<button type='button' class='delete-button' onClick='deleteField(this)'>delete</button>

The one in the Idden div, they’ll all be cloned this way