Мне интересно, есть ли способ удалить 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>