Задать вопрос
@hakkol
javascript

Почему не работает remove?

Доброго времени суток. Работал с формой, хотел добиться следующего - чтобы при нажатие на 1 кнопку появлялась пустая форма, при нажатие на вторую кнопку (которая вызывается с помощью первой кнопки) - запись удалялась. Удаление не работает. С js туго. Вот код, подскажите, что делаю не так
<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<div>			
			<ul>
				<li><span id="add_theme">Add</span></li>

			</ul>
		</div>
		<div class="test"></div>
		<script src="jquery.js" type="text/javascript"></script>
		<script src="superlist.js" type="text/javascript"></script>
	</body>
</html>


$(document).ready(function() {

    $('#add_theme').click(function() {
        $('<div class="ft_inputs">\n' +
            '<input type="text" placeholder="Name theme"/>\n' + 
            '<textarea rows="5" placeholder="Desription theme"></textarea><div class="remove_theme">Delete</div></div>') . 
            fadeIn('slow').appendTo('.test');

    });

    $('.remove_theme').click(function() {
        $('.ft_inputs').remove(); 
    });
});
  • Вопрос задан
  • 1912 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
atomheart
@atomheart
Пишу на Python за карму и за деньги
Потому что у вас новым элементам .remove_theme не назначено событие click.

Т.е. ваш код по созданию события должен находиться в событии click кнопки add:

$('#add_theme').click(function() {
        $('<div class="ft_inputs">\n' +
            '<input type="text" placeholder="Name theme"/>\n' + 
            '<textarea rows="5" placeholder="Desription theme"></textarea><div class="remove_theme">Delete</div></div>') . 
            fadeIn('slow').appendTo('.test');

        $('.remove_theme').click(function() {
            $('.ft_inputs').remove(); 
        });
    });


Ну и кстати, кнопка Delete удалит все созданные объекты. Я так понимаю, задумывалось так, чтобы каждая кнопка Delete удаляла только свой родительский элемент? Если да, то копайте в сторону метода parent().
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
@Scrum
Front-End developer
Делегирование вам в помощь
$(document).ready(function() {

    $('#add_theme').click(function() {
        $('<div class="ft_inputs">\n' +
            '<input type="text" placeholder="Name theme"/>\n' + 
            '<textarea rows="5" placeholder="Desription theme"></textarea><div class="remove_theme">Delete</div></div>') . 
            fadeIn('slow').appendTo('.test');

    });

    $('.test').on('click', '.remove_theme', function() {
        $('.ft_inputs', '.test').last().remove(); 
    });
});
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка графического приложения с использованием библиотеки javaFx
22 дек. 2024, в 17:15
2000 руб./за проект
Вирусные рилсы для е-коммерс и ВБ
22 дек. 2024, в 17:11
50000 руб./за проект
Допил JS-PHP парсера
22 дек. 2024, в 16:26
2500 руб./за проект
Ещё заказы