Is there a way of deleting this div with a button with jQuery?

Question

I'm working on some jQuery on my website. The logic to create a new container with new inputs is already made, but the delete button doesn't work. Any hints or paths to go?

var i = 0;
$("#addAula").click(function() {

  i++;

  $("#newAula").append('<div class="inline-flex" id="containerAula' + [i] + '"> <div class="inline-block w-full mr-2"> <label class="text-sm font-bold text-center uppercase opacity-70">Título</label> <input type="text" id="titulo_aula' + [i] + '" class="w-full p-3 mt-2 mb-4 rounded bg-slate-200" required> </div> <div class="inline-block ml-2"> <label class="text-sm font-bold uppercase opacity-70">Video ID</label> <input type="text" id="video_id' + [i] + '"class="w-full p-3 mt-2 mb-4 rounded bg-slate-200" required> </div> <div class="inline-block mt-10 ml-2"> <button id="removeAula' + [i] + '"class="h-8 px-3 font-bold duration-300 ease-in-out rounded cursor-pointer text-newwhite bg-red"> X </button> </div> <p class="my-3"></div>');

});

$("#removeAula" + i).click(function() {
  $("#containerAula" + i).remove(); //where i'm trying to reach the delete action
});

<div id="newAula">

  <div class="inline-flex" id="containerAula0">
    <div class="inline-block w-full mr-2">
      <label class="text-sm font-bold text-center uppercase opacity-70">Título</label>
      <input type="text" name="titulo" class="w-full p-3 mt-2 mb-4 rounded bg-slate-200" required>
    </div>
    <div class="inline-block ml-2">
      <label class="text-sm font-bold uppercase opacity-70">Video ID</label>
      <input type="text" name="video_id" class="w-full p-3 mt-2 mb-4 rounded bg-slate-200" required>
    </div>
    <div class="inline-block mt-10 ml-2">
      <button id="removeAula0" class="h-8 px-3 font-bold duration-300 ease-in-out rounded cursor-pointer text-newwhite bg-red" type="button">
                        X
                        </button>
    </div>
    <p class="my-3">
    </p>
  </div>
</div>
<button id="addAula" class="px-6 py-3 my-2 font-bold duration-300 ease-in-out rounded cursor-pointer text-newwhite bg-lightgreen" type="button">
                    + Aula
                    </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

IMG:

Sorry for any rookie mistake, thanks for your time

Answer 1

The delete listener is using the global variable i, which gets incremented every time you add another DIV, not the value at the time the handler was created.

You need to use a local variable that's saved in the closure.

var i = 0;
$("#addAula").click(function() {

  i++;

  $("#newAula").append('<div class="inline-flex" id="containerAula' + [i] + '"> <div class="inline-block w-full mr-2"> <label class="text-sm font-bold text-center uppercase opacity-70">Título</label> <input type="text" id="titulo_aula' + [i] + '" class="w-full p-3 mt-2 mb-4 rounded bg-slate-200" required> </div> <div class="inline-block ml-2"> <label class="text-sm font-bold uppercase opacity-70">Video ID</label> <input type="text" id="video_id' + [i] + '"class="w-full p-3 mt-2 mb-4 rounded bg-slate-200" required> </div> <div class="inline-block mt-10 ml-2"> <button id="removeAula' + [i] + '"class="h-8 px-3 font-bold duration-300 ease-in-out rounded cursor-pointer text-newwhite bg-red"> X </button> </div> <p class="my-3"></div>');

  let cur = i;
  $("#removeAula" + i).click(function() {
    $("#containerAula" + cur).remove();
  });

});

Answer 2

I think you should try something like this

<script>
   $(".removeAula").click(function(){
       $(this).parent('.containerAula').remove();
   });
</script>

You need to change your html by adding a class into every remove button (removeAula for example), and to every container (containerAula), select every remove button and add an event listener to it, inside that listener you just look for the parent of the clicked button and remove it.

I think it should work.