태그 선택기가 동적 양식으로 표시되지 않습니다

Question

선택기에 버튼을 표시하고 싶습니다 .hapus-baris-makanan nama-makanan 배열 형식의 숫자가 하나 이상인 경우 선택기의 버튼 .hapus-baris- makanan이 나타납니다. 그러나 array-form nama-makanan 공백/null의 숫자 인 경우 .hapus-baris-makanan 선택기의 버튼이 숨겨집니다. 다음 코딩 내가 만든

HTML

<form id="formpembayaran" method="post" action="<?php echo base_url('pembayaran/simpanitempembayaran'); ?>"> 

    <table class="table table-striped area-table tabel-form-makanan"> 
     <thead> 
      <tr> 
       <th>Nama Makanan</th> 
       <th>Jenis Makanan</th> 
       <th>Harga Makanan</th>        
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/> 
        <input type="hidden" name="id-makanan[]" class="id-makanan"/> 
       </td> 
       <td> 
        <input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/> 
       </td> 
       <td> 
        <input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/> 
       </td> 
       <td> 
        <a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

자바 스크립트 :

$(document).ready(function(){ 

    var myForm = document.forms.formpembayaran; 
    var idMakanan = myForm.elements['nama-makanan[]']; 

    if (idMakanan.length == null){ 
     $('.hapus-baris-makanan').hide(); 
    } else { 
     $('.hapus-baris-makanan').show(); 
    } 

    $('.tombol-tambah-makanan').on('click', function(){ 
     var tr = '<tr>\n\ 
        <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\ 
        <td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\ 
        <td><input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\ 
        <td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\ 
       </tr>'; 
     $("table.tabel-form-makanan tbody").append(tr);     
    }); 

    $('.tombol-reset-makanan').on('click', function(){ 
     $('table.tabel-form-makanan tbody tr:not(:first)').remove(); 
    }); 

    $('.tabel-form-makanan').on('click', '.hapus-baris-makanan', function(){ 
     $(this).closest('tr').remove() 
    }); 
    }); 

나는 오류의 위치를 ​​알고하지 않습니다. 도와주세요, 제발. 감사합니다

Answer 1

이 :

var myForm = document.forms.formpembayaran; 
var idMakanan = myForm.elements['nama-makanan[]']; 

if (idMakanan.length == null){ 
    $('.hapus-baris-makanan').hide(); 
} else { 
    $('.hapus-baris-makanan').show(); 
} 

은 다음과 같아야합니다

if($('.nama-makanan').length){ 
    $('.hapus-baris-makanan').show(); 
} else { 
    $('.hapus-baris-makanan').hide(); 
} 

및 .hapus-baris-makanan는