как добавить и удалить текстовое поле ввода в asp. net главной странице

Question

* пытается добавить и удалить текстовое поле ввода для формы cv, но это не работает. используя asp. net на главной странице. когда я нажимаю на иконку не работает. это будет текстовое поле и значок «+» для добавления .. при нажатии на значок он дает тот же текстовое поле ввода и другой значок, чтобы удалить другое текстовое поле ..

Я не используйте MVC .. , если есть другой способ кодирования? Я буду признателен за это.

это мой код: enter code here это мой код (java script + css + html)

$(document).ready(function () {

    var counter = 2;

    $("#addButton").click(function () {

        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('span'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().aspx('Textbox' + counter +
            '<input type="text" name="courseName' + counter +
            '" id="courseId' + counter + '" value="" >');

        newTextBoxDiv.appendTo("#course");


        counter++;
    });

    $("#removeButton").click(function () {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }

        counter--;

        $("#TextBoxDiv" + counter).remove();

    });

    $("#sumbitcvId").click(function () {

        var msg = '';
        for (i = 1; i < counter; i++) {
            msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
        }
        alert(msg);
    });
});

.coursecv,.mosdcv {
    font-family: 'Assistant', sans-serif;
    padding: 10px;
    margin: 10px;
    width: 27.5%;
    position: relative;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    display: inline-block;
    }

    <div id="course">
            <div>
          

            <h1>course</h1>
        

            </div>
        <span id="TextBoxDiv">
        
         <asp:TextBox ID="courseId" runat="server" name="courseName" type="Text" placeholder="course name" CssClass="coursecv" value="" required="required"></asp:TextBox>
        </span>
        <span>
        <asp:TextBox ID="mosdId" runat="server" name="mosdName" type="Text" placeholder="Corporation" CssClass="mosdcv" required="required"></asp:TextBox>
        </span>
        

</div>

            <div Id="ADD"  style="margin-left:87%;color: #3c6bf4;font-family: 'Assistant', sans-serif;font-size: 17px;">
                        <a href="javascript:void(0);" class="addButton" title="Add field"><i class="fas fa-plus-circle"></i></a>
                         <a href="javascript:void(0);" class="removeButton" title="Remove field"><i class="fas fa-minus-circle"></i></a>


                
            
</div>

Answer 1

Поскольку вы используете имена классов для идентификации полей в JQuery - вы должны использовать точку (.) В качестве идентификатора, чем ha sh (#). Ха sh используется для идентификации элементов с использованием идентификатора.

$(".addButton").click(function () {

    if (counter > 10) {
        alert("Only 10 textboxes allow");
        return false;
    }

    var newTextBoxDiv = $(document.createElement('span'))
        .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().append('Textbox' + counter +
        '<input type="text" name="courseName' + counter +
        '" id="courseId' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#course");


    counter++;
});

Приведенный выше код вызовет действие щелчка и добавит текстовые поля.