How do I make an delete button disappear after it appears when it is called in a click-like addeventlistener?

Question

I would like the "remove time" button on the page not to appear again!

• The page comes with an already time field
• The remove time button does not appear on the rendered page
• When the user clicks on the "add a time" button a new time field appears and the remove button appears right next to the add button
• I would like the Remove Time button to disappear again if the user deletes the add field by leaving only one time as initially on the loaded page

Excerpt from html buttons

<fieldset id="schedule-items">
          <legend>Horários disponíveis
            <button type="button" id="add_time">+ Novo horário</button>
            <button type="button" id="rm-time">- Remover</button>
          </legend>
          <div class="schedule-item">
            <div class="select-block">
              <label for="weekday">Dia da semana</label>
              <select name="weekday[]" required>

Well, that’s what I implemented in JS but I can’t continue from there, so the remove button goes back to in 'Hide' mode say so, after the user deletes the added time

document.getElementById('rm-time').style.display = 'none'

document.getElementById('add_time').addEventListener('click', showRemoveField)

function showRemoveField() {
  const getSchedules = document.querySelectorAll('.schedule-item')
  const changeDisplay = document.getElementById('rm-time').style.display = ''

  if (getSchedules.length > 1) {
    return changeDisplay 
  } else {
    
  }
}

Answer 1

Good thanks to the reply of the friend

@Rodrigo Carvalho de Brito

Follows answer from the same:

$('add_time').on("click", function(){
    $('rm-time').show();
});

 $('rm-time').on("click", function(){
    $(this).hide();
});

• For a future doubt like mine I’ll leave as I did so that more elaborate codes can appear than mine to help those who may have the same doubt

• rm-time is the ID of the Remove Time button

• add_time is the ID of the add time button

• Using this code the add time button "calls" to remove and the same disappears if the user wants to delete a time field in a way that leaves only one.

• Using a condition was necessary because if the user put for example 3 time fields, using the direct Hide code on the rm-time button the same would disappear after being clicked preventing the removal of the second time added

$('#rm-time').hide();
$('#add_time').on("click", showRemoveField)


 function showRemoveField() {
  const showButton = document.querySelectorAll('.schedule-item')

  if (showButton.length > 1) {
    return $('#rm-time').show()
  } else {
}
}

$('#rm-time').on("click", hideRemoveField)

function hideRemoveField() {
  const hideButton = document.querySelectorAll('.schedule-item')
  if (hideButton.length <= 1) {
    return $('#rm-time').hide()
  } else {

  }
}

Answer 2

Your question is very confusing. If you use jQuery it will be much simpler, simple!!!

$('rm-time').hide();
$('add_time').on("click", function(){
    $('rm-time').show();
});

To hide the rm-time:

$('rm-time').on("click", function(){
    $(this).hide();
});