JQuery在单击按钮时从div集合显示隐藏div

我正在构建一个用户界面，使用户可以输入自己的信息，即名字、姓氏、联系电话。一次只能输入5个人。 以下是预设的HTML：

<div class="row rootPerson">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <%-- root person always stays there --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row person2" style="display: none">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <label class="removeperson2">Remove person</label>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row person3" style="display: none">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <label class="removeperson3">Remove person</label>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row person4" style="display: none">
    <div class="col-md-1">
        <div class="form-group">
            <label>6</label>
        </div>
    </div>
    <div class="col-md-1">
        <div class="form-group">
            <label class="removeperson4">Remove person</label>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <%-- server control --%>
        </div>
    </div>
</div>
<div class="row btnAddMorePerson">
    <div class="col-md-12">
        <div class="form-group">
            <%-- button --%>
        </div>
    </div>
</div>
<div class="row btnForm">
    <div class="col-md-12">
        <div class="form-group">
            <%-- button --%>
        </div>
    </div>
</div>

类名为[rootPerson]的Div将始终保留。单击[addMoreBtn]将显示以下类名以[person*]开头的div。单击类名以[removePerson*]开头的div可再次隐藏此div

我想显示/隐藏类名以[person*]开头的div，可以比我在这里定义的多

---

如果person2可见，单击addMore按钮将显示以下div person3。如果删除了person2，addMore将显示person2

我刚刚在javascript中为我自己的项目开发了一个类似的功能。 您可以通过javascript在页面上按一个按钮来添加HTML

我给你做了一把小提琴：

我还添加了一个remove按钮，该按钮映射到javascript函数RemovePerson

如果您感兴趣的是我在我的项目中是如何实现这一点的，您可以在这里找到：

---

如果您还有更多问题，请随时提问

您尝试过什么？有什么问题吗？请发布一些jQuery代码。。。另外，如果要将所有这些div设置为一个表……为什么不使用html table元素？@a.Wolff因为我是jquery初学者，所以不合逻辑。如果我能在这里找到它，逻辑就会起作用。谢谢。@laveloosdiv代替html只是因为这是一种实践，因为我也在使用twitter引导。我尝试了你的脚本动态添加填充html。但是获取解析器错误。我认为解决办法不对。我想我应该像您提供的那样通过脚本来构建接口，但也应该动态地提供html，而不是预定义的，因为最后我需要一些值，我想，我会通过jquery ajax调用或REST API来实现这些值。谢谢你用的是什么浏览器？在Chrome中对我很好你的剧本很好，我检查了小提琴。在VisualStudio中，当我将html放入其中时，遇到了解析器错误。