У меня есть следующий html с счетчиком, который принимает несколько раз кнопку с именем "Add Metric"
она нажала. Я буду использовать это числовое значение, чтобы присвоить его некоторому html, созданному нажатием самой кнопки.
У меня нет проблем с добавлением элементов, счетчик работает хорошо. Проблемы возникают, когда мне нужно удалить что-то посреди всего сгенерированного контента. Например, рассмотрим случай, когда я нажимаю 4 раза кнопку "Add Metric"
, генерируемый код будет:
<div id="metric-0"> .... </div>
<div id="metric-1">
....
<input type="text" name="metrics[1][name]" value="Text 1"></div>
....
</div>
<div id="metric-2">
....
<input type="text" name="metrics[2][name]" value="Text 2"></div>
....
<div id="metric-3"> .... </div>
Если мне нужно удалить, допустим, второй div (<div id="metric-1">
), я бы получил следующее:
<div id="metric-0"> .... </div>
<div id="metric-1">
....
<input type="text" name="metrics[1][name]" value="Text 1"></div>
....
</div>
<div id="metric-2"> .... </div>
Там, где metric-2
и metric-3
преобразуются в metric-1
и metric-2
Во всяком случае, я не понимаю, где я ошибаюсь, и я могу получить только этот случай, когда все divs сохраняют свое имя
<div id="metric-0"> .... </div>
<div id="metric-2"> ....
....
<input type="text" name="metrics[2][name]" value="Text 2"></div>
....
</div>
<div id="metric-3"> .... </div>
Вопрос: Есть ли решение решить эту проблему? Здесь скрипка
Здесь HTML:
<div id="InputsWrapper">
<input type="button" id="AddMoreFileBox" value="Add Metric">
MetricsCounter: <input type="text" id="MetricsCnt" value="-1" />
</div>
Это код jQuery:
$(document).ready(function() {
/*
* Add Metric Button
*/
$("#AddMoreFileBox").click(function (){
var FieldCount = $('#MetricsCnt').val();
FieldCount++;
$('#MetricsCnt').val(FieldCount);
$("#InputsWrapper").append
('<div id="metric-'+FieldCount+'">'
+'Metric:<input type="text" name="metrics['+ FieldCount +'][name]" value="Text '+ FieldCount+'"/><br/>'
+'<label>Tags:</label><br/>'
+'<div id="tags-'+FieldCount+'">'
+'<input type="button" class="addtag" id="'+FieldCount+'" value="+ Tag">'
+'<input type="hidden" id="AddBox'+FieldCount+'" value="-1" />'
+'</div>'
+'<label>Aggregator:</label><br/>'
+'<div id="aggregators-'+FieldCount+'">' // Aggregators-0 prima volta
+'<input type="button" class="agg" id="'+FieldCount+'" value="+ Aggregator">'
+'<input type="hidden" id="AggBox'+FieldCount+'" value="-1" />'
+'</div>'
+'<a href="#" class="removeclass">×</a></div>');
return false;
});
/*
* Delete a Metric
*/
$("body").on("click",".removeclass", function(e){ //user click on remove text
$(this).parent('div').remove(); //remove text box
var FieldCount = $('#MetricsCnt').val();
FieldCount--;
$('#MetricsCnt').val(FieldCount);
return false;
});
/*
* AddTag Button
*/
//var valueCnt = 0;
$("#InputsWrapper").on('click', ".addtag", function (){
var idTags = $(this).attr('id');
var tagCounter = $('#AddBox'+idTags).val();
tagCounter++;
$('#AddBox'+idTags).val(tagCounter);
$('#tags-'+idTags).append
('Id: <input type="text" class="tagsIdentifier" id="TagId-'+idTags+tagCounter+'" />'+ //OK
'Value: <input type="text" class="tagValues-'+idTags+tagCounter+'" id="TagValue-'+idTags+tagCounter+'" name="metrics['+idTags+'][tags][][]" /></div><br/>');
//return false;
});
/*
* Add Aggregator Button
*/
$("#InputsWrapper").on('click', ".agg", function(){
var ids = $(this).attr('id');
//alert(ids);
var aggCounter = $('#AggBox'+ids).val();
aggCounter++;
$('#AggBox'+ids).val(aggCounter);
$('#aggregators-'+ids).append(
'Type: <input type="text" name="metrics['+ids+'][aggregators]['+aggCounter+'][name]" />'+
'Sampling: <input type="text" name="metrics['+ids+'][aggregators]['+aggCounter+'][sampling][value]" />'+
'<input type="text" name="metrics['+ids+'][aggregators]['+aggCounter+'][sampling][unit]" /><br/>');
return false;
});
/*
* Updates every tagID change using the mouseleave function
*/
$('#InputsWrapper').on('mouseleave', '.tagsIdentifier', function(){
var tagIdentifierId = $(this).attr('id');
var provaId=$(this).attr("id").split("-");
var tagIdValue = $(this).val();
$('#TagValue-'+provaId[1]).attr("name","metrics["+provaId[1].charAt(0)+"][tags]["+tagIdValue+"][]");
});
});
Ответ на ваш вопрос - да. Ход довольно простой, хотя это немного неудобно... Подход заключается в следующем: при удалении метрики получите количество удаленной метрики с помощью чего-то вроде
var numRemoved = parseInt($(this).parent('div')[0].id.substr(7));
(Очевидно, эта строка должна стоять перед удалением div).
Затем переименуйте все следующие метрики и вообще в цикле:
for (var i = numRemoved + 1; i <= FieldCount; i++) {
// rename objects
var metric = $("#metric-" + i);
metric[0].id = "metric-" + (i - 1);
metric.find(...).attr('name', ...);
...
}
(FieldCount здесь, прежде чем уменьшать его.)