Скрыть пустое текстовое поле в JavaScript

Question

Мне нужна эта функция removeRow(), чтобы проверить, пустое ли текстовое поле HTML, и если да, установить его отображение на «none» (чтобы скрыть его). У меня также есть этот function funcTest(), который проверяет, заполнено ли текстовое поле, и если оно & & Максимальное количество разрешенных строк не было превышено, то оно устанавливает отображение на «'(чтобы сделать его видимым). Заранее спасибо. Извиняюсь, если я не ввел все в нужном формате для StackOverflow. Я никогда раньше не задавал вопрос. Вся помощь оценивается; Я смотрел на это дольше, чем я признаю.

HTML

<table width="650" border="0" cellpadding="2" cellspacing="2" class="table_border"> 
      <tr class="blacktext9"> 
       <td> 
        <table align="center"> 
         <button id="testbutton" name="testbutton" onclick="funcTest();return false;">Test</button> 

         <button id="testbuttonRemove" name="testbuttonRemove" onclick="removeRow()">Remove empty rows</button> 

         <input type="hidden" id="last_row" name="last_row" value=1 /> 

         <tr id="rowToDisplay1" > 
          <td> 
           ID: 
           <input id="testId1" name="testId1" type="text" /> 
          </td> 
         </tr> 
         <tr id="rowToDisplay2" style="display: none"> 
          <td> 
           ID: 
           <input id="testId2" name="testId2" type="text" /> 
          </td> 
         </tr> 
         <tr id="rowToDisplay3" style="display: none"> 
          <td> 
           ID: 
           <input id="testId3" name="testId3" type="text" /> 
          </td> 
         </tr> 
         <tr id="rowToDisplay4" style="display: none"> 
          <td> 
           ID: 
           <input id="testId4" name="testId4" type="text" /> 
          </td> 
         </tr> 
         <tr id="rowToDisplay5" style="display: none"> 
          <td> 
           ID: 
           <input id="testId5" name="testId5" type="text" /> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 

JS

function removeRow() { 
    var r = myMAX_ROWS; 

    for (r; r <= myMAX_ROWS; r--) { 
     if ((document.getElementById('testId' + r).value == '') && (document.getElementById('rowToDisplay' + r).style.display = '')) { 
      document.getElementById('rowToDisplay' + r).style.display = 'none'; 

     } 
    } 
} 
function funcTest() { 

    var LASTROW = document.getElementById('last_row').value; 
    //myMAXROWS currently set to 3 

    if(LASTROW < myMAX_ROWS && document.getElementById('testId' + LASTROW).value != '') { 
     LASTROW++; 
     document.getElementById('rowToDisplay'+LASTROW).style.display = ''; 
     document.getElementById('last_row').value = LASTROW; 
    } 

Answer 1

Просто проверьте длину значения текстового поля, и скрыть, если он пуст:

(Хотя, не знаю, почему ты 'd хочу сделать это, так как у вас не будет доступа к скрытому текстовому полю для добавления ввода в первую очередь, если он скрыт)

JQuery Пример:

$("#textBox").on("keydown", function() { 
     if ($(this).val().length <= 0) { 
      $(this).hide(); 
     } 
     else { 
      log("TEXTBOX IS NOT EMPTY"); 
      $(this).show(); 
     } 
    }); 

Answer 2

Похоже, если вы хотите сделать это таким образом, и без JQuery я покажу вам вашу проблему. Вы используете

.value == '' 
.style.display = '' 

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

Пожалуйста, попробуйте следующее:

.value.length < 1 
.style.display.length < 1 

вместо и, надеюсь, что он работает для вас

I've created a Fiddle (click this line) for you to see

Answer 3

Во-первых, у вас есть бесконечный цикл, здесь:

var r = myMAX_ROWS; 

for (r; r <= myMAX_ROWS; r--) { 

Так как вы назначают r myMAX_ROWS, и вы уменьшаете r, r wil l ВСЕГДА быть < = myMAX_ROWS. Вы, вероятно, хотите

var r = myMAX_ROWS; 
for (r; r >= 0; r--) { 

Кроме того, '' не является допустимым значением CSS для 'отображения'. Однако «нет». Измените настройки дисплея на это:

document.getElementById('rowToDisplay'+LASTROW).style.display = 'none'; 

Установить дисплей «Нет», чтобы скрыть его, установить его на «встроенный блок» или «блок», чтобы показать его (в зависимости от расположения вашей страницы). Это намного проще с jQuery:

$("#elementID").show(); 
$("#elementID").hide();