@hakkol

Почему не работает 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(); 
    });
});
  • Вопрос задан
  • 1856 просмотров
Решения вопроса 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().
Ответ написан
Пригласить эксперта
Ответы на вопрос 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(); 
    });
});
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы