javascript - 如何使用 javascript 删除我的选项？

Question

嗨，早上好，程序员们。我使用 html 创建了一种表单。当用户根据该数字选择人数时，大部分年龄和姓名框将同时打开，我有一个链接可以删除该框。

html代码是:

<div class="selectContainer">
    <label for="name">Number Of Person:</label>
    <select id="ddTest" name="no_person">
        <option value="">- Select -</option>
        <option value="Option1">1</option>
        <option value="Option2">2</option>
        <option value="Option3">3</option>
    </select>
</div>

<div class="hidden isOption1">
    <a href="#" class="remove" rel="Option1">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
</div>
<div class="hidden isOption2">
    <a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
    <br>
    <a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
</div>
    <div class="hidden isOption3">
         <a href="#" class="remove" rel="Option3">remove</a>

         <label>Name</label>
         <input type="text" name="name" >
         <label>Age</label>
         <input type="text" name="age" >
         <br>
         <label>Name</label>
         <input type="text" name="name" >
         <label>Age</label>
         <input type="text" name="age" >
         <br>

         <label>Name</label>
         <input type="text" name="name" >
         <label>Age</label>
         <input type="text" name="age" >
        </div>

脚本是

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#ddTest").change(function() {         
        var value = $("#ddTest option:selected").val();
        if (value === '') return;
        var theDiv = $(".is" + value);

        //displays the selected option div
        theDiv.slideDown().removeClass("hidden");

        //disbales the selected option
        $("#ddTest option:selected").attr('disabled','disabled');
            $(this).val('');
        });  

        $("div a.remove").click(function () {
            var value = $(this).attr('rel');
            var theDiv = $(".is" + value);
            //enables the disabled option
            $("#ddTest option[value=" + value + "]").removeAttr('disabled');
            //hides the selected option div
            $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
        });
    });
</script>

输出:当我选择人数 2 时，将出现 2 个姓名框和 2 个年龄框以及删除链接

问题:问题是当我单击第一个选项的删除链接时，它不仅会删除第一个选项，还会删除第二个选项。如何避免这种情况？

提前谢谢您。

Answer 1

代码中的两个基本错误:1.你忘记添加div2.您两次提到选项3，即通过单击删除第二个和第三个选项