मैं सोच रहा हूं कि (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>
1
Scooter5150 13 अक्टूबर 2011, 21:21
मैं वास्तव में नहीं समझता कि आप क्या करना चाहते हैं, लेकिन कई में से एक को रखने के लिए, .not() (api.jquery.com/not)
 – 
TimCodes.NET
13 अक्टूबर 2011, 21:28
अगर मैं सही ढंग से समझ गया, तो आप फॉर्म 1 से तत्वों को क्लोन कर रहे हैं, और फिर जो आपको नहीं चाहिए उसे हटा रहे हैं ... तो, केवल उन हिस्सों की प्रतिलिपि क्यों न बनाएं जिनकी आपको आवश्यकता है?
 – 
jackJoe
13 अक्टूबर 2011, 21:28
क्या आप कृपया पृष्ठ के साथ अपने इरादों का वर्णन कर सकते हैं? क्या किसी तत्व पर कक्षाओं की संख्या का पता लगाना संभव है? निश्चित रूप से, बस वास्तविक "वर्ग" विशेषता (जेएस का उपयोग करके) को " " पर विभाजित करें और लंबाई की जांच करें। लेकिन हम शायद आपके मन में जो कुछ भी करना चाहते हैं उसे करने का एक बेहतर तरीका सुझा सकते हैं। अधिक अर्थपूर्ण html सहित।
 – 
Sinetheta
13 अक्टूबर 2011, 21:35

2 जवाब

सबसे बढ़िया उत्तर

बदलने के

newForm = ???

साथ

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

नए फॉर्म से पहले बी-आइटम को छोड़कर सभी को हटाने के लिए।

1
Kevin B 13 अक्टूबर 2011, 21:41

आपके प्रश्न के आधार पर, मुझे लगता है कि आप फॉर्म को क्लोन करना चाहते हैं, फिर उस फॉर्म से पहला .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');
0
swatkins 13 अक्टूबर 2011, 21:47