Иногда бывает необходимо продублировать и/или удалить часть HTML-кода. Например, в форме контактов, таким образом, можно создать динамическое добавление/удаление номера телефона. Вариантов решения этой задачи достаточно много. Я же предлагаю вам воспользоваться возможностями библиотеки jQuery.
Для наглядности сразу рассмотрим следующий пример:
<table id="phones">
<tr class="phone">
<td><input type="text" name="code_country[]"></td>
<td><input type="text" name="code_city[]"></td>
<td><input type="text" name="number[]"></td>
<td><input type="hidden" name="is_fax[]" value="1"></td>
<td><a href="#" onclick="$(this).parents('tr.phone').filter(':first').clone().appendTo('#phones'); return false">+</a></td>
<td><a href="#" onclick="$(this).parents('tr.phone').filter(':first').remove(); return false">x</a></td>
</tr>
</table>
В данном примере у нас есть таблица (TABLE) с одной строкой (TR) состоящая из ячеек (TD) с полем phone[] и двумя ссылками: дублировать (+) и удалить (-).
Для события onclick ссылки «дублировать» (+) определён следующий сценарий:
$(this).parents('tr.phone').filter(':first').clone().appendTo('#phones');
Что он делает? Относительно текущего (this) объекта (тег A, ссылки «дублировать») ищется первый (first) по иерархии родительский тег TR с классом phone, клон (дубликат) которого добавляется к содержимому объекта с id равным phones.
Для события onclick ссылки «удалить» (-) определён следующий сценарий:
$(this).parents('tr.phone').filter(':first').remove();
Что он делает? Относительно текущего (this) объекта (тег A, ссылки «удалить») ищется первый (dirst) по иерархии родительский тег TR с классом phone, который и удаляется (remove).
Обратите внимание, что идентификатор phones должен быть уникальным, для чего был описан как id. В тоже время, каждой строке (TR) в таблице присвоен класс phone, который должен встречаться только в множестве phones.
