Удаление добавление HTML кода
 

Смастерил вот такую конструкцию, но цикл не работает до конца (вторая часть скрипта), подскажите почему?
Должно работать все по кругу, появляться и исчезать при нажатии на кнопку.

<div class="add-cut">
<button class="add">Добавить</button>
</div>
<ul class="l1">
   <li class="it1">Название</li>    
   <li class="it2">Цена</li>    
 </ul>

$('.add').bind('click', function() {
  $('<ul class="l2"><li class="it1">Название</li><li class="item it2">Цена</li></ul>').insertAfter($('.l1'));
  $(".add-cut").empty();
  $('<button class="cut">Удалить</button>').prependTo($('.add-cut'));
});
 
$('.cut').bind('click', function() {
    $(".add-cut").empty();
  $('<button class="add">Добавить</button>').prependTo($('.add-cut'));
});

Все же очевидно вы пытаетесь повесить обработчик на те элементы которые еще не созданы.

$('.add-cut').on('click', '.add, .cut', function ( e ) {
	if ( $( e.target ).hasClass('add') ) {
		$('.li').after('<ul class="l2"><li class="it1">Название</li><li class="item it2">Цена</li></ul>');
		$('.add-cut').html('<button class="cut">Удалить</button>');
	} else {
		$('.add-cut').html('<button class="add">Добавить</button>');
	}
});

Или так.

$('.add-cut').on('click', '.add, .cut', function ( e ) {
	var targetClass = e.target.className;

	$( e.target )
		.addClass( targetClass == 'add' ? 'cut' : 'add' )
		.text( targetClass == 'add' ? 'Удалить' : 'Добавить' )
		.removeClass( targetClass )
		.hasClass('add') &&
			$('.li').after('<ul class="l2"><li class="it1">Название</li><li class="item it2">Цена</li></ul>');
});

Rise, сходи в школу поучись "повторные телодвижения" это и есть цикл.

dd_smol,
К сожалению мне это не очевидно, я только поверхностно знаю Jquery, и я не могу дискутировать на эту тему. Но почему вы говорите На какой не созданный элемент я по вашему ссылаюсь?

Все что мне нужно, это что бы при нажатии на кнопку "удалить" HTML был в первоначальном состоянии, до нажатия на кнопку "Добавить". А далее я мог повторно использовать этот цикл сколько угодно раз, как сказал Rise "повторными телодвижениями".

Ваши предложенные варианты не работают так как мне надо.

Весь смысл в том что бы была возможность бесконечно добавлять и удалять (если не нужен) список <ul class="l2">

http://codepen.io/EvgenStor/pen/JbEjMP

Rise, воспользуйся своим советом сам, желчь проверь, явно избыток! Лучше по делу чего нибудь сказал, чем отрыжки свои извергать!

Кому интересно решение было найдено

$('.add-cut').on('click', '.add', function() {
  $(".add-cut").empty();
  $('<ul class="l2"><li class="it1">Название</li><li class="item it2">Цена</li></ul>').insertAfter($('.l1'));
  $('<button class="cut">Удалить</button>').prependTo($('.add-cut'));
});

$('.add-cut').on('click', '.cut', function() {
  $(".add-cut").empty();
  $('<button class="add">Добавить</button>').prependTo($('.add-cut'));
  $(".l2").empty();
});