Невозможно удалить динамически добавленный div (с событием, вызванным более старым div)

Question

Невозможно удалить динамически добавленный div (с событием, вызванным более старым div)

Я пытался удалить определенный div после успешного действия ajax. Некоторый код:

Здесь я пытаюсь удалить его из DOM:

$('#close-modal').on('click', function () {

console.log("modal closed");
$( "#animation" ).remove();

});

Весь этот код внутри $(document).ready{......} функция

Проблема в том, что при отправке формы появляется анимация, но я не могу удалить ее при закрытии модального окна.
Я расследовал, и все говорят, что это потому, что событие должно быть вызвано .on, но на тот случай, если мне нужно удалить элемент, нажав на него! И в этом случае мне нужно удалить его, выполнив другое действие (закрыть модальное окно).

var url = "formulario.php"; // El script a dónde se realizará la petición.
$.ajax(
{
type: "POST",

url: url,

data: $("#formulario").serialize(), // Adjuntar los campos del formulario enviado.

success: function(data)
{
$("#formulario_contacto").hide();

$('.modal-content').append("<div id = "animation" class='icon icon--order-success svg'><svg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' class = 'posicion'><g fill='none' stroke='#8EC343' stroke-width='2'><circle cx='36' cy='36' r='35' style='stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;'></circle><path d='M17.417,37.778l9.93,9.909l25.444-25.393' style='stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;'></path></g></svg></div>");
}
});

event.preventDefault();

Надеюсь, ты сможешь мне помочь. Поздравления из Аргентины!

2

ajax jquery php removeclass

Решение

Другие решения

remove() это функция, которую вы должны добавить скобки () в конце :

$('#close-modal').on('click', function () {
console.log("modal closed");
$( "#animation" ).remove();
});

Надеюсь это поможет.

0

Источник

Accepted Answer

В добавлении div есть ошибка.
Ваша ошибка заключается в удалении вашего добавленного div здесь:

 $('.modal-content').append("<div id = "animation" class='icon icon--order-success svg'><svg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' class = 'posicion'><g fill='none' stroke='#8EC343' stroke-width='2'><circle cx='36' cy='36' r='35' style='stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;'></circle><path d='M17.417,37.778l9.93,9.909l25.444-25.393' style='stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;'></path></g></svg></div>");

Как вы можете заметить, когда публикуете это сообщение, вы закрываете двойные кавычки своего приложения, когда пытаетесь назвать идентификатор «анимация» здесь. Тогда он не сгенерирует div с этим именем, потому что это «вне» дополнения. Чтобы завершить добавление, вам нужны двойные кавычки … Если вы проверите свой элемент, вы увидите, нет ли такого имени.

правильный:

 $('.modal-content').append("<div id ='animation' class='icon icon--order-success svg'><svg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' class = 'posicion'><g fill='none' stroke='#8EC343' stroke-width='2'><circle cx='36' cy='36' r='35' style='stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;'></circle><path d='M17.417,37.778l9.93,9.909l25.444-25.393' style='stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;'></path></g></svg></div>");

Я сингл процитировал это для вас.

затем вызвать его через функцию щелчка как

$('#close-modal').on('click', function () {
$( "#animation" ).remove();
});

Проверьте, работает ли это сейчас.

1