Блог

Главная - Вопросы по программированию - jQuery: переиндексируйте порядок после удаления динамически добавляемых элементов

jQuery: переиндексируйте порядок после удаления динамически добавляемых элементов

#javascript #jquery

#javascript #jquery

Вопрос:

Я создаю блоки div динамически с идентификаторами элементов, идентификаторами меток. При создании он работает так, как ожидалось.

Скрипка

Чего я хочу: после удаления строки 2 оставшиеся элементы должны быть переупорядочены, как показано ниже :

  • Текст метки строки должен читаться как строка 1, строка 2, строка 3, строка 4 и т. Д. … Вместо строки 1, строки 3, строки 4
  • Входные значения должны читаться как номер ввода 1, номер ввода 2, номер ввода 3, номер ввода 4 вместо номера ввода 1, номер ввода 3, номер ввода 4 и т.д…
  • Идентификаторы тегов удаления привязки должны читаться как removeItem-1, removeItem-2, removeItem-3, removeItem-4 и т. Д. … Вместо removeItem-1, removeItem-3, removeItem-4

Где, как и после удаления, он работает не так, как ожидалось.

введите описание изображения здесь

 var counter=1;
$("#addNewItem").click(function(){
  $('<div class="input-row"><span>Row ' counter '</span> <input type="text" value="Input number ' counter '"><a href="javascript:;" class="remove-row" id="removeItem-' counter '">Remove</a></div>').appendTo('#inputContainers');
  counter  ;
});

jQuery(document).on('click', '.remove-row', function(){
  jQuery(this).closest('.input-row').remove();
}) 
 .rp-container{padding:10px 10px 0 10px;background:f3f3f3;width:500px;margin:20px auto;border:1px solid #cecece;}
.input-row{padding:5px;margin-bottom:10px;}
.input-row:nth-child(odd){background-color:#efefef;}
#inputContainers{margin-top:15px;}
#remove-row{margin-left:5px;}
input[type="text"]{margin:0 10px;}
#addNewItem{display:block;text-align:right;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="rp-container">
  <a href="javascript:;" id="addNewItem">  Add new</a>
  <div id="inputContainers"></div>
</div>

Ответ №1:

Вы можете создать некоторую функцию для сброса значений вашего элемента divs. Итак, при remove-row каждом первом нажатии уменьшайте значение counter на 1 , чтобы в следующий раз, когда вы нажмете добавить новое, оно начиналось с правильного значения.Затем вызовите свою функцию для сброса значений.Внутри этой функции вы можете выполнить цикл input-row с помощью each цикла, затем использовать .find метод, чтобы получить элемент, который вам нужно изменить, и добавить новое значение к вашему элементу, используя .text() and .val() .

Демонстрационный код :

 var counter = 1;
$("#addNewItem").click(function() {
  $('<div class="input-row">Row <span>'   counter   '</span> <input type="text" value="Input number '   counter   '"><a href="javascript:;" class="remove-row" id="removeItem-'   counter   '">Remove</a></div>').appendTo('#inputContainers');
  counter  ;
});

jQuery(document).on('click', '.remove-row', function() {
  jQuery(this).closest('.input-row').remove();
  counter--; //decremnt counter
  reset_values(); //call this rset values
})

function reset_values() {
  var count = 1;
  //loop through all divs
  $("#inputContainers > .input-row ").each(function() {
    $(this).find("span").text(count); //set new count to span
    $(this).find("input").val("Input number "   count); //set value
    $(this).find("a.remove-row").attr("id", "removeItem-"   count); //set id
    count  ; //increment count
  })


} 
 .rp-container {
  padding: 10px 10px 0 10px;
  background: f3f3f3;
  width: 500px;
  margin: 20px auto;
  border: 1px solid #cecece;
}

.input-row {
  padding: 5px;
  margin-bottom: 10px;
}

.input-row:nth-child(odd) {
  background-color: #efefef;
}

#inputContainers {
  margin-top: 15px;
}

#remove-row {
  margin-left: 5px;
}

input[type="text"] {
  margin: 0 10px;
}

#addNewItem {
  display: block;
  text-align: right;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rp-container">
  <a href="javascript:;" id="addNewItem">  Add new</a>
  <div id="inputContainers"></div>
</div>

Ответ №2:

Вам не нужен никакой счетчик. Просто переставьте числа динамически, вот так:

 $("#addNewItem").click(function(){
  $('<div class="input-row"><span>Row '  ($('.input-row').length   1)  '</span> <input type="text" value="Input number '  ($('.input-row').length   1)  '"><a href="javascript:;" class="remove-row" id="removeItem-'   ($('.input-row').length   1)   '">Remove</a></div>').appendTo('#inputContainers');
});

jQuery(document).on('click', '.remove-row', function(){
  jQuery(this).closest('.input-row').remove();
  $('.input-row').each(function(i){
     $(this).find('span').html('Row '   (i 1));
     $(this).find('input').val('Input number '   (i 1));
     $(this).find('a').attr('id','removeItem-'   (i 1));
  });
}) 
 .rp-container{padding:10px 10px 0 10px;background:f3f3f3;width:500px;margin:20px auto;border:1px solid #cecece;}
.input-row{padding:5px;margin-bottom:10px;}
.input-row:nth-child(odd){background-color:#efefef;}
#inputContainers{margin-top:15px;}
#remove-row{margin-left:5px;}
input[type="text"]{margin:0 10px;}
#addNewItem{display:block;text-align:right;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="rp-container">
  <a href="javascript:;" id="addNewItem">  Add new</a>
  <div id="inputContainers"></div>
</div>

Ответ №3:

Если я правильно понимаю этот вопрос, вам просто нужно снова вызвать этот метод, где вы перечисляете эти строки.

 jQuery(document).on('click', '.remove-row', function(){
  jQuery(this).closest('.input-row').remove();
  jQuery(this).closest().reload();
})

Комментарии:

1. @parmer харш , спасибо за ответ. Но это не работает. получение ошибки при перезагрузке не является функцией

2. jQuery (это). перезагрузка ();

3. или вы можете использовать это $(‘.имя вашего элемента, которое вы хотите перезагрузить’). имя вашего элемента, который вы хотите перезагрузить ();

4. На самом деле, я хочу изменить порядок всех элементов, обозначаемых, как указано выше, в моем вопросе и ссылочном изображении. PS: функция reload() не работает

5. я сталкиваюсь с той же проблемой, что и вы. я создаю блок изображения в карусели после удаления блока изображения, он не будет обновляться. но приведенное ниже решение работает для меня, вам нужно внести некоторые изменения в имя вашего элемента. попробуйте это в функции после удаления строки ввода. $(‘#carouselExampleIndicators’).load(окно. Расположение. href ‘ #carouselExampleIndicators’, function () { $(‘.carousel’).carousel(); });

Ответ №4:

Вы можете просто использовать одну функцию перенумеровки как для добавления, так и для удаления строки. При этом все будет правильно пронумеровано из центральной функции, и вам не нужно вручную дублировать это задание при создании новой строки, как сейчас.

 $("#addNewItem").click(function() {
    $('<div class="input-row"><span></span> <input type="text"><a href="javascript:;" class="remove-row">Remove</a></div>').appendTo('#inputContainers');
    renumberRows();
});

$('#inputContainers').on('click', '.remove-row', function() {
    $(this).closest('.input-row').remove();
    renumberRows();
})

function renumberRows() {
    let n;
    $('#inputContainers .input-row').each(function(i) {
        n = i   1;
        $(this).find('span').text('Row '   n);
        $(this).find('input').attr('placeholder', 'Input number '   n);
        $(this).find('a').attr('id', 'remoteItem-'   n);
    })
}

Я бы также посоветовал вам использовать placeholder атрибут для ваших входных данных, потому что при всех приведенных здесь решениях ваши входные значения будут перезаписываться каждый раз, когда вы меняете строки. С помощью placeholder вы предоставляете пользователю приглашение, но не вмешиваетесь в то, что они на самом деле вводят в поля ввода.

Демонстрация здесь

Метки: