Не могу выбрать и удалить клонируемые элементы
Подскажите пожалуйста, как мне правильно выбрать и удалить клонов.
Есть 9 чекбоксов, при выборе которых (при клике) клонируются label в отдельные span. При переводе (клике) чекбокса в "невыбранный" - соответствующий этому чекбоксу клон нужно удалить. У меня не получилось удалить именно этот клон, удалялись все сразу... Буду признателен за правильный код, спасибо!
$(document).ready(function() {
$(".checklist input:checked").parent().addClass("selected");
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked","checked");
span_class = $(this).parent().find("label").attr("for");
$(this).parent().find("label").clone().appendTo(".right_col_slwrap div").wrap("<span></span>").addClass(span_class); //клонировал <label for="choice_a">Выбран первый чекбокс</label> ......Всего восемь чекбоксов....
}
);
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");
var $this = $(this).parent().find("input").attr("id");
// здесь при клике нужно удалить клона ...
}
);
});
|
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<div id="area">
<input type="checkbox" /> <label>1</label>
<input type="checkbox" /> <label>2</label>
<input type="checkbox" /> <label>3</label>
<input type="checkbox" /> <label>4</label>
<input type="checkbox" /> <label>5</label>
<input type="checkbox" /> <label>6</label>
<input type="checkbox" /> <label>7</label>
<input type="checkbox" /> <label>8</label>
<input type="checkbox" /> <label>9</label>
</div>
<div id="clones">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script type="text/javascript">
$('#area input:checkbox').each(function (i, g) {
this.onchange = function () {
if (this.checked) {
$('#clones span').eq(i).html($(g).next().clone());
} else {
$('#clones span').eq(i).empty();
}
}
});
</script>
|
Спасибо огромное!
|
Мысли вслух.
Если одному элементу ставится в соответствие другой, то почему бы не устанавливать элементу-контролу в качестве свойства свежесозданный элемент? И чтобы потом удалить его не понадобятся ни селектор, ни перебор по порядку. |
Вложений: 1
Прицепил в архив , то, с чем работал.
Ну по сути два дня голову ломал, не получилось. Если выбрано два чекбокса, то при клике на любой их них удаляются оба клона... |
AlexPrm, так я же Вам пример алгоритма привёл, всё должно было получиться.
|
Цитата:
Спасибо! |
| Часовой пояс GMT +3, время: 02:58. |