Как удалить Div, если количество классов больше, чем х в JQuery? - PullRequest
Новая
       18

Как удалить Div, если количество классов больше, чем х в JQuery?

1 голос
/ 13 октября 2011

Мне интересно, есть ли способ удалить div на основе (1) класса и (2) числа? Я смотрел на 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>

Ответы [ 2 ]

1 голос
/ 13 октября 2011

заменить 

newForm = ???

с 

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

для удаления всех, кроме первого b-элемента из новой формы.

0 голосов
/ 13 октября 2011

Исходя из вашего вопроса, я понял, что вы хотите клонировать форму, а затем оставить первый .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');
...