javascript - 如何在asp.net母版页中添加和删除输入文本框

Question

*尝试添加和删除表单简历的输入文本框，但它不起作用。通过在母版页中使用asp.net。当我点击图标时不起作用。它将是一个文本框和要添加的图标“+”..当单击该图标时，它会提供相同的文本框输入。以及其他图标以删除其他文本框..

我没有使用 MVC..是否有其他方式编码？我会很感激的。

这是我的代码:在此处输入代码这是我的代码(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 中的字段 - 您应该使用点 (.) 作为标识符，而不是哈希 (#)。 Hash 用于使用 Id 来标识元素。

$(".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++;
});

上面的代码将触发点击操作并添加文本框。