यदि वर्ग गणना jQuery में x से अधिक है तो div को कैसे हटाएं?

मैं सोच रहा हूं कि (1) कक्षा और (2) गिनती के आधार पर div को हटाने का कोई तरीका है या नहीं? मैं टुकड़ा () देख रहा था, लेकिन मैं यह नहीं समझ सकता कि एचटीएमएल के साथ काम करने के लिए इसे कैसे प्राप्त किया जाए, मुझे इसका उपयोग करने के लिए मजबूर होना पड़ता है ...

नीचे 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>