How to count the amount of input elements within a div

Question

Using Asp.net MVC, I am creating one the inputs dynamically using a loop with the di database data.

<div class="col-md-12" id="div-contatos">

    @if (Model.PessoasContatosViewModel != null)
    {
        @for (int i = 0; i < Model.PessoasContatosViewModel.Count; i++)
        {


            <div class="form-group row align-items-center">
                <div class="col-md-2">
                    @Html.HiddenFor(model => model.PessoasContatosViewModel[i].Id, new { @class = "hid-id" })
                    <label asp-for="PessoasContatosViewModel[i].ContatoTipoId" class="control-label sel-contatoTipo">Tipo de Contato</label>
                    <select asp-for="PessoasContatosViewModel[i].ContatoTipoId" asp-items="Model.ContatosTipos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contatoTipo"></select>
                    <span asp-validation-for="PessoasContatosViewModel[i].ContatoTipoId" class="text-danger"></span>
                </div>
                <div class="col-md-4">
                    <label asp-for="PessoasContatosViewModel[i].Contato" class="control-label txt-contato">Contato</label>
                    <input type="text" asp-for="PessoasContatosViewModel[i].Contato" class="form-control txt-contato" />
                    <span asp-validation-for="PessoasContatosViewModel[i].Contato" class="text-danger"></span>
                </div>

                <div class="col-md-3">
                    <label asp-for="PessoasContatosViewModel[i].Detalhes" class="control-label txt-detalhes">Detalhes</label>
                    <textarea asp-for="PessoasContatosViewModel[i].Detalhes" class="form-control txt-detalhes"></textarea>

                </div>
                <div class="col-md-2">
                    <label class="control-label">&nbsp;</label>
                    <div class="checkbox-custom checkbox-default">
                        <input type="checkbox" asp-for="PessoasContatosViewModel[i].ContatoPrincipal" class="ckb-contatoPrincipal" checked autocomplete="off" />
                        <label asp-for="PessoasContatosViewModel[i].ContatoPrincipal" class=" ckb-contatoPrincipal">Contato Principal</label>
                    </div>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-icon btn-default btn-outline btn-remover-contato" data-id="@Model.PessoasContatosViewModel[i].Id" style="margin-top: 30px;"><i class="icon wb-trash" aria-hidden="true"></i></button>
                </div>
            </div>
        }

    }

</div>

Using Javascript, when I click the Add Contact button, I need to know how many inputs I have inside my div-contacts. For this, I’m using JS:

var itemIndex = $("#div-contatos input.iHidden").length;

The problem is that it is not working. The Return is being 0. What is wrong?

Answer 1

You are rendering the following html:

<input type="text" asp-for="PessoasContatosViewModel[i].Contato" class="form-control txt-contato" />

Your input has two classes: form-control and txt-contact. However, in your javascript, you are counting the amount of elements with the class iHidden.

Try it this way:

var itemIndex = $("#div-contatos input.txt-contato").length;