выборка и удаление div-ов из textarea
 

Всем привет!
Имеется форма с текстовым полем, в которое динамически загружается текстовый документ с такой структурой:

<div>
<h1>один</h1>
</div>

<div>
<h1>два</h1>
</div>

<div>
<h1>три</h1>
</div>

Хочу реализовать визуальное удаление этих div-ов, т.е. чтоб не нужно было выделять несколько строк с нужным div-ом, а видеть просто список div-ов с заголовками (из h1 каждого) в виде кнопок "удалить".
Как с помощью jQuery преобразовать каждый такой слой в визуальную кнопку удалить "один (здесь название из h1)", при нажатии на которую в textarea строки с нужным div-ом будут стираться?
P.S. количество строк для каждого div одинаковое, к примеру 7, если это поможет

Писать лениво,
Общие соображения:
Придаете формe id, после подгрузки контента добавляете через each кнопки удаления (после h1),
кнопам придаете класс ("Knopa"),
по данному классу:

$(".Knopa").live("click", function(){
  $(this).parent("div").remove();
});

Шикарно! работает, спасибо )
А если после закрытия удаляемого <div></div> есть переносы строк \r\n\r\n, их можно тоже удалить?

<div>
<h1>название</h1>
<input type='button' class='delete' value='удалить этот блок'>
</div>\r\n\r\n

Попробовал так, не получилось:

$(".delete").live("click", function(){
	$(this).parent('div').after('\r\n\r\n').remove();
	$(this).parent('div').remove();
});

в данном случае переносы строк после div не удаляются, а наоборот добавляются дополнительные..