如果在jquery中类计数大于x，如何删除div？

Question

我想知道是否有办法根据（1）类和（2）计数删除div？我正在看slice（），但我无法弄清楚如何让它与我被迫使用的html一起工作......

下面是HTML及其下面的jquery代码。 （添加书按钮位于最底部）我评论了jquery代码，试图解释我正在尝试做什么...（我也发布在：http://jsfiddle.net/n00b0101/kW2vR/）

<div class="s-item">
    <!-- Form for Book 0 -->
    <div class="s-form">
        <div class="form-item"><input type="text" name="book[0]" value="" /></div>

        <div class="b-item">
            <div class="form-item"><input type="text" name="book[0][title][0]" value="" /></div>
            <div class="form-item"><input type="text" name="book[0][subtitle][0]" value="" /></div>
            <div class="form-item"><input type="text" name="book[0][author][0]" value="" /></div>
        </div>

        <div class="b-item">
            <div class="form-item"><input type="text" name="book[0][title][1]" value="" /></div>
            <div class="form-item"><input type="text" name="book[0][subtitle][1]" value="" /></div>
            <div class="form-item"><input type="text" name="book[0][author][1]" value="" /></div>
        </div>

        <div class="b-item">
            <div class="form-item"><input type="text" name="book[0][title][2]" value="" /></div>
            <div class="form-item"><input type="text" name="book[0][subtitle][2]" value="" /></div>
            <div class="form-item"><input type="text" name="book[0][author][2]" value="" /></div>
        </div>      

        <div class="book-buttons"><input type="button" name="book-0-add" value="Add Item" /></div>
    </div>

    <!-- Form for Book 1 -->
    <div class="s-form">
        <div class="form-item"><input type="text" name="book[1]" value="" /></div>

        <div class="b-item">
            <div class="form-item"><input type="text" name="book[1][title][0]" value="" /></div>
            <div class="form-item"><input type="text" name="book[1][subtitle][0]" value="" /></div>
            <div class="form-item"><input type="text" name="book[1][author][0]" value="" /></div>
        </div>

        <div class="b-item">
            <div class="form-item"><input type="text" name="book[1][title][1]" value="" /></div>
            <div class="form-item"><input type="text" name="book[1][subtitle][1]" value="" /></div>
            <div class="form-item"><input type="text" name="book[1][author][1]" value="" /></div>
        </div>

        <div class="book-buttons"><input type="button" name="book-1-add" value="Add Item" /></div>
    </div>  
</div>

<div class="new-book-button"><input type="button" name="add-book" value="" /></div>

这是jquery：

$(document).ready(function() {
    $('input[name=add-book]').click(function() {
        addAdditionalBook();
    }
});

function addAdditionalBook() {
    var totalForms = $('.s-form').length; //Yields 2;
    var sFormsItems = $('.s-form:first > .b-item').length; //Yields 3

    //Trying to
    //Step 1 : Clone the first s-form
    var newForm = $('.s-form:first').clone();

    //Step 2: Keep only the first b-item... Will slice work here? 
    //When I try to use slice, I can't get it to just deal with .b-items

    newForm = ???

    //Step 3: Increment the ids and names for book x
    $(newForm).find('*').each(function() {
        if( $(this).is(':input') ) {
            var bookName = $(this).attr("name");
            $(this).attr("name", bookName.replace(/book-0/,'book-'+totalForms).replace(/book_0/,'book_'+totalForms).replace(/book\[0/,'book['+totalForms));
        }

        var sid = $(this)[0].id;    
        $(this).attr('id', sid.replace(/book-0/,'book-'+totalForms).replace(/book_0/,'book_'+totalForms).replace(/book\[0/,'book['+totalForms));
    });

}

所以，毕竟说完了，我应该结束这个HTML：

<div class="s-item">
    <!-- Form for Book 0 -->
    <div class="s-form">
        <div class="form-item">Book Title: <input type="text" name="book[0]" value="" /></div>

        <div class="b-item">
            <div class="form-item">Book Chapter: <input type="text" name="book[0][chapter][0]" value="" /></div>
            <div class="form-item">Book Subtitle: <input type="text" name="book[0][subtitle][0]" value="" /></div>
            <div class="form-item">Book Author: <input type="text" name="book[0][author][0]" value="" /></div>
        </div>

        <div class="b-item">
            <div class="form-item">Book Chapter: <input type="text" name="book[0][chapter][1]" value="" /></div>
            <div class="form-item">Book Subtitle: <input type="text" name="book[0][subtitle][1]" value="" /></div>
            <div class="form-item">Book Author: <input type="text" name="book[0][author][1]" value="" /></div>
        </div>

        <div class="b-item">
            <div class="form-item">Book Chapter: <input type="text" name="book[0][chapter][2]" value="" /></div>
            <div class="form-item">Book Subtitle: <input type="text" name="book[0][subtitle][2]" value="" /></div>
            <div class="form-item">Book Author: <input type="text" name="book[0][author][2]" value="" /></div>
        </div>      

        <div class="book-buttons"><input type="button" name="book-0-add" value="Add Item" /></div>
    </div>

    <!-- Form for Book 1 -->
    <div class="s-form">
        <div class="form-item">Book Chapter: <input type="text" name="book[1]" value="" /></div>

        <div class="b-item">
            <div class="form-item">Book Chapter: <input type="text" name="book[1][chapter][0]" value="" /></div>
            <div class="form-item">Book Subtitle: <input type="text" name="book[1][subtitle][0]" value="" /></div>
            <div class="form-item">Book Author: <input type="text" name="book[1][author][0]" value="" /></div>
        </div>

        <div class="b-item">
            <div class="form-item">Book Chapter: <input type="text" name="book[1][chapter][1]" value="" /></div>
            <div class="form-item">Book Subtitle: <input type="text" name="book[1][subtitle][1]" value="" /></div>
            <div class="form-item">Book Author: <input type="text" name="book[1][author][1]" value="" /></div>
        </div>

        <div class="book-buttons"><input type="button" name="book-1-add" value="Add Item" /></div>
    </div>  

    <!-- Form for Book 2 -->
    <div class="s-form">
        <div class="form-item">Book Chapter: <input type="text" name="book[2]" value="" /></div>

        <div class="b-item">
            <div class="form-item">Book Chapter: <input type="text" name="book[2][chapter][0]" value="" /></div>
            <div class="form-item">Book Subtitle: <input type="text" name="book[2][subtitle][0]" value="" /></div>
            <div class="form-item">Book Author: <input type="text" name="book[2][author][0]" value="" /></div>
        </div>

        <div class="book-buttons"><input type="button" name="book-2-add" value="Add Item" /></div>
    </div>      
</div>

<div class="new-book-button"><input type="button" name="add-book" value="Add Book" /></div>

Answer 1

替换

newForm = ???

与

newForm.find(".b-item:not(:first)").remove();

删除新表单中除第一个b项以外的所有项目。

Answer 2

根据您的问题，我知道您要克隆表单，然后保留该表单中的第一个.b-item？如果这是正确的，你可以这样做：

//Step 1 : Clone the first s-form
var newForm = $('.s-form:first').clone();

//Step 2: Keep only the first b-item... 
var firstItem = newForm.find('.b-item:first');