使用javascript获取html形式的输入数组字段的长度

Question

I need the array length

html code

<form action="#" method="POST" name="form1">
    <table class="table table-hover">
        <thead>
          <tr>
            <th>Name</th>
            <th>Date</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
            <tr id="profile_1_">
                <td><a href="http://localhost:8000/company/jobseeker/profile/1" target="_blank">Geethu</a></td>
                <td>2017-05-10 06:20:35</td>
                <td><button type="button" class="btn btn-danger btn-xs remove-profile" id="1">Remove</button></td>
                <td><input type="hidden" name="candidate[1]"></td>
                </tr>
                  <tr id="profile_2_">
                <td><a href="http://localhost:8000/company/jobseeker/profile/2" target="_blank">John</a></td>
                <td>2017-05-10 09:04:12</td>
                <td><button type="button" class="btn btn-danger btn-xs remove-profile" id="2">Remove</button></td>
                <td><input type="hidden" name="candidate[2]"></td>
            </tr>
        </tbody>            
    </table>
</form>

I want to get the count of candidate array each time i remove a table row.

javascript code

<script type="text/javascript">
    $(".remove-profile").click(function(){
        alert($('input[name="candidate[]"]').length);
        var id = $(this).attr('id');
        $('#profile_'+id).remove();
        getTotal();
    });

    function getTotal(){
      var count = $('input[name="candidate[]"]').length;
      var total = count * 10 ;
      $('input[name=total]').val(total);
    }
</script>

but I'am getting count as 0 always.

Answer 1

Firstly add a class to your table tbody say .profile-tbody

<tbody class="profile-tbody">
   @foreach($data as $key => $item)
     ...
   @endforeach
</tbody>

Next add the following jQuery code

$(".profile-tbody").on( "click", ".remove-profile", function() {
  $('.profile-tbody tr').length;
});

Since you're removing elements dynamically, you need to use the event delegation approach to attach an event handler to the element. A simple .click(function would not work.

Assuming the number of <tr> (rows) are the number of items( $item ) in your array

Also please remove the $('input[name="candidate[]"]').length you have added, you are just checking the length of a input field(textbox) which is not even present & hence it will always return 0.