Jquery. Как удалить созданый ранее input?

Question

[mydarck]

Страница похожа по своей функциональности на раздел каталога. Где идет перечень услуг с кнопкой заказать напротив каждой услуги. Форму заказа одна и чтобы определить с какой услуги пришел заказ решил добавить дополнительное скрытое поле по клику на соответствующую кнопку. Данный подход создал пару вопросов. Первый и основной. Скрытое поле создаю следующем образом:

$('.video-base').click(function(){
$('.headerOrder').append('<input type="hidden" name="serviceName" value="Свадьба. Видеопакет &quot;Базовый&quot;" />');
});

При данном подходе, если закрыть форму не отправляя то повторное нажатие на кнопку с классом создаст еще одно скрытое поле и так до бесконечности. Как можно этого избежать?
Второй, побочный вопрос. Я на каждую кнопку повесил событие .click. В результате получилась огромная пелена типа:

$('.video-base').click(function(){
			$('.headerOrder').append('<input type="hidden" name="serviceName" value="Свадьба. Видеопакет &quot;Базовый&quot;" />')
		});
		$('.photo-standard').click(function(){
			$('.headerOrder').append('<input type="hidden" name="serviceName" value="Свадьба. Фотопакет &quot;Стандарт&quot;" />')
		});
// и т.д.

Сам знаю что это не красиво, но как вы уже поняли из кода выше я только учусь. Если подскажете как грамотно укоротить подобную запись буду очень благодарен.

Answer 1

[Сергей]

Сначала всем кнопкам задай общий класс (пусть будет 'service-button'). Затем нужно как-то создать отображение кнопка->имя сервиса. Например, добавить каждой кнопке аттрибут data-service-name="My service name"

$('.service-button').click(function(){
  var serviceName = $(this).attr('data-service-name');
  if ($('.headerOrder input[name=serviceName]').length === 0) {
    $('.headerOrder').append('<input type="hidden" name="serviceName" value="" />');
  }
  $('.headerOrder input[name=serviceName]').val(serviceName);
});

А еще лучше добавить поле serviceName еще на стороне сервера, так как html не должен строиться на стороне клиента без необходимости. Тогда и условие в обработчике не нужно будет, так поле точно существует.

Comments

[Алексей Уколов]

var serviceName = $(this).attr('data-service-name');
можно заменить на
var serviceName = $(this).data('service-name');

а
if ($('.headerOrder input[name=serviceName]').length === 0)
на
if ($('.headerOrder').find('input').filter('[name=serviceName]').length)