jQuery обнаружение/удаление пустого выбора и ввода DOM-манипуляции

Question

У меня в настоящее время два входа с одинаковыми именами (я знаю, это немного странно). Первый - это selectbox, а второй - текстовое поле.

Что я хочу сделать, это проверить, выполнено ли одно, а другое пустое, а затем удалить пустую, прежде чем отправлять мою форму.

Вот мой HTML:

<form accept-charset="UTF-8" action="/helps" class="formtastic help" id="new_help" method="post" novalidate="novalidate"> 

<li class="select input required" id="help_category_input"> 

    <label class=" label" for="help_category"> 
    Category<abbr title="required">*</abbr> 
    </label> 
    <select id="help_category" name="help[category]"> 
    <option value=""></option> 
    <option value="First Category">First Category</option></select> 
    <option value="Second category">Second Category</option></select> 

</li> 

<li class="string input required stringish" id="help_category_input"> 
    <label class=" label" for="help_category"> 
    Category<abbr title="required">*</abbr> 
    </label> 
    <input class="input2line" id="help_category" maxlength="255" name="help[category]" type="text" /> 

</li> 

<li class="action button_action " id="help_submit_action"> 

    <button name="button" type="submit">Create Help</button> 

</li> 
</form> 

Я попытался с помощью метода Jquery submit и empty метода, но я думаю, что я не знаю, как выбрать правильно правое поле.

Можете ли вы мне помочь, пожалуйста? сердечным приветом Роб

EDIT: я получил что-то вроде этого

if($('#help_category > option').empty && $('#help_category[type=text]').!empty{ 
    to_remove = $('#help_category > option') 
    to_remove.remove 
} 

if($('#help_category > option').!empty && $('#help_category[type=text]').empty{ 
    to_remove = $('#help_category[type=text]') 
    to_remove.remove 
} 

Answer 1

$("#new_help").submit(function() { 
    $("input[name='help[category]'], select[name='help[category]']", this).each(function() { 
     if ($(this).val() === '' || $(this).val() === null) { 
      $(this).remove(); 
     } 
    }); 
}); 

Answer 2

Вы установили оба элемента с одинаковым идентификатором поля (id="help_category"), это не является действительным HTML. Идентификатор атрибута должен быть уникальным.

Измените значения входных идентификаторов и используйте селектор id jquery для их идентификации.

<select id="help_category_select" name="help[category]"> 
    <option value=""></option> 
    <option value="First Category">First Category</option> 
    <option value="Second category">Second Category</option> 
</select> 

<input class="input2line" id="help_category_input" maxlength="255" name="help[category]" type="text" /> 

$("#new_help").submit(function() 
{ 
    var sel = $('#help_category_select'); 
    var inp = $('#help_category_input'); 
    if ((sel.val() === '' || sel.val() === null) && 
     (inp.val() === '' || sel.val() === null) 
    { 
     // Neither value selected - Prevent submission 
     return false; 
    } else if (sel.val() === '' || sel.val() === null) 
    { 
     sel.remove(); 
    } else { 
     inp.remove(); 
    } 
});