Есть ли способ нацелиться на предыдущий элемент?

Question

Я работаю над формой, созданной моей CMS. Форма генерируется в таблице, которая по большей части немного мешает идентификаторам или классам захватывать и манипулировать вещами.

Ниже приведен пример секции я работаю с:

<tr> 
    <td> 
     <label class="wrappable" id="4354-3-34-2324"> 
      <span class="explicit"> 
       "Give me your answer" 
      </span> 
     </label> 
     <br/> 
     <span> 
      <textarea></textarea> 
     </span> 
     </br> 
    </td> 
</tr> 

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

Единственное, что я могу придумать, чтобы скрыть этот вопрос, все с одним утверждением - использовать идентификатор метки, а затем каким-то образом достичь уровня до td и не показывать его на дисплее. Таким образом, я могу легко переключить его видимость с помощью jQuery на основе ответа на вопрос, стоящий перед ним.

Кто-нибудь знает, возможно ли это, или если есть более простой способ, я могу это сделать?

Answer 1

Единственного, что я могу думать, чтобы скрыть этот вопрос все с одним заявлением является использование идентификатора метки, а затем каким-то образом достичь вверх уровня к тду и установить его дисплей нет. Таким образом я могу легко переключить его видимость с помощью jQuery на основе ответа на вопрос над ним.

Если вы хотите немедленного родителя определенного элемента, вы можете использовать функцию parent() в JQuery:

// This would hide the parent element for your specific element 
$('#4354-3-34-2324').parent().hide(); 

Если вам необходимо выйти за пределы этого, вы можете использовать функцию closest() пройти вверх DOM-найти ближайший элемент с помощью селектора:

// This would hide the closest <td> element for your specific 
$('#4354-3-34-2324').closest('td').hide(); 

Так как вы хотите, чтобы вызвать это на основе результата вашего вопроса, вы можете слушать ваши конкретные <textarea> элементов и определить, когда они меняют и показать/скрыть соответственно:

$(document).on('change','textarea',function(){ 
    // When a text area has changed, check it's value 
    var text = $(this).val(); 
    // Use the text here to determine how to handle what you need 
    if(condition){ 
     // Hide the nearest <td> if your condition is met 
     $(this).closest('td').hide(); 
    } 
}); 

Answer 2

захватить click события для label самого

$("#4354-3-34-2324").on('click', function(){ 
    $(this).parent().hide(); 
});