Javascript 清除父字段集中的文本框

我正在使用这个插件，它基本上是通过并排设置一些字段集来工作的。因为每个字段集都是同一个类的成员，所以我试图找到为每个表单添加清除按钮的最简单方法，并使用jQuery单独清除该特定表单中的输入字段

我尝试使用

.parent（）

、

.parents（）

和

.closest（）

来隔离用户正在处理的字段集。虽然我可以清除正在处理的表单，但我最终会清除应用程序中每个字段集中的表单。我们经常使用jQuery，所以我对这方面比较陌生。有什么想法吗

jQuery

    $('#clearButton').click(function() {
        $(this).closest('fieldset').find('input:text').val('');
        $('#Pensgc').attr('readonly', false);
    });

样品剃须刀

<fieldset class="step">
    <legend>Display Exceptions</legend>
    <center>
        <table id="ExceptionEditing">
            <thead>
                <tr>
                    <th>Exception Name</th>
                    <th>Starting Letter</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.ExceptionList.Count(); i++)
                {
                    <tr id="@Model.ExceptionList[i].Id">
                        <td>
                            @Html.TextBoxFor(anything => Model.ExceptionList[i].ExceptionName, new {style = "width:300px;", @readonly = "readonly", maxlength=255 })
                        </td>
                        <td style="padding-left:30px;" class="EditStartingLetter">
                            @Html.TextBoxFor(anything => Model.ExceptionList[i].StartingLetter, new {style = "width:10px;", @readonly = "readonly", maxlength=1 })
                        </td>
                        <td style="padding-left:10px;">
                            <a href="#" class="editException">Edit</a>
                        </td>
                        <td style="padding-left:10px;">
                            <a href="#" class="deleteException">Delete</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </center>
</fieldset>
<fieldset class="step">
    <center>
        <legend>Create Exception</legend>
        <table>
            <tr>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.createExceptionName)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.createExceptionName, new { @class="AlphaNumOnly", maxlength=255 })
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.createExceptionLetter)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.createExceptionLetter, new { @class="AlphaNumOnly", maxlength=1 })
                    </div>
                </td>
            </tr>
        </table>
        <button type="submit" class="submitButton">Submit</button>
        <button type="submit" class="clearButton">Clear</button>
    </center>
</fieldset>

显示异常
异常名称
起始字母
@对于（int i=0；iModel.ExceptionList[i].ExceptionName，新的{style=“width:300px；”，@readonly=“readonly”，maxlength=255}）
@Html.TextBoxFor（anything=>Model.ExceptionList[i].StartingLetter，新的{style=“width:10px；”，@readonly=“readonly”，maxlength=1}）
}
创建异常
@LabelFor（model=>model.createExceptionName）
@TextBoxFor（model=>model.createExceptionName，新的{@class=“AlphaNumOnly”，maxlength=255}）
@LabelFor（model=>model.createExceptionLetter）
@TextBoxFor（model=>model.createExceptionLetter，新的{@class=“AlphaNumOnly”，maxlength=1}）
提交
清楚的

编辑

---

这里有一把工作小提琴：

刚刚意识到我已经将

类型

属性设置为

重置

。以前从未使用过它，但是移除它解决了问题

<button class="clearButton">Clear</button>

清除

阅读文档后，我在他们的JavaScript中发现了以下行：

current = $this.parent().index() + 1;

使用$this表示已单击的。这意味着：如果打开第二个选项卡，当前值将为1

var fieldsetCount = $('#formElem').children().length;

这就是他们检索幻灯片数量的方式。 通过将所有内容放在一起，您可以使用以下代码获得当前字段集：

var currentFieldsetIndex = $(".selected").index();
var $currentFieldset = $("#formElem").children().eq(currentFieldsetIndex);

然后你可以用

$currentFieldset.find("input:text").val("");

---

使用JSFIDLE有助于我们帮助您与HTML相比，您的选择器是错误的。您正在使用

#clearButton

这是一个ID。在HTML中，您有

class=“clearButton”

。发布生成的HTMLplease@NealR凯尔有答案。您正在按ID选择按钮，但它只有类。@MikeBell-刚刚添加了一个fiddle，他正要发布这个答案。使用

reset

和

submit

将使表单在单击时执行其默认操作。为了避免这种情况，您可以在单击函数中使用

evt.preventDefault（）

，以确保表单不会执行本机的

reset

和

submit

操作。