Search code examples
jquerycloneslice

how to remove div if class count is greater than x in jquery?

I'm wondering if there is a way to remove a div based on (1) the class and (2) the count? I was looking at slice(), but I can't figure out how to get it to work with the html I'm forced to use...

Below is the HTML and below that is the jquery code. (The add-book button is at the very bottom) I commented the jquery code to try and explain what I'm trying to do... (I also posted it at: 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>

Here is the 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));
    });

}

So, after all is said and done, I should wind up with this 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>
Solution

  • replace

    newForm = ???

    with

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

    to remove all but the first b-item from the new Form.