Есть ли способ удалить этот div с помощью кнопки с помощью jQuery?

Я работаю над jQuery на своем сайте. Логика создания нового контейнера с новыми входными данными уже реализована, но кнопка удаления не работает. Любые подсказки или пути, чтобы пойти?

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>

ИЗОБРАЖЕНИЕ: enter image description here

Извините за любую ошибку новичка, спасибо за ваше время

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Слушатель удаления использует глобальную переменную i, которая увеличивается каждый раз, когда вы добавляете новый DIV, а не значение на момент создания обработчика.

Вам нужно использовать локальную переменную, сохраненную в замыкании.

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

});

спасибо за ответ и объяснение бро, очень помогло

eitibiti 24.04.2022 07:46

Я думаю, вы должны попробовать что-то вроде этого

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

Вам нужно изменить свой html, добавив класс в каждую кнопку удаления (например, removeAula) и в каждый контейнер (containerAula), выберите каждую кнопку удаления и добавьте к ней прослушиватель событий, внутри этого прослушивателя вы просто ищете родителя нажатую кнопку и удалите ее.

Я думаю, это должно сработать.

Другие вопросы по теме