0

Есть блок .container в который динамически с помощью jquery добавляются div блоки нумерованные от 0 до 9. Требуется сделать удаление их но так, чтобы например при удалении element-5 был порядок не

element-4
element-6
...

а

element-4
element-5
...

jQuery(document).ready(function($) {

  // Добавление динамически div
  var i = 1;
  $(document).on("click", ".btn-add", function() {
    $(".container").append('<div class="element element-'+i+'">'+i+' <a href="#" class="btn-del element-'+i+'">Del</a></div>');
    i++;
  });

  // Удаление div
  $(this).on("click", ".btn-del", function() {
    $(this).closest('.element').remove();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="btn-add">Add</a>

<div class="container">
  <div class="element element-0">0 <a href="#" class="btn-del element-0">Del</a></div>
</div>

2 ответа 2

0

Это конечно и на JS можно организовать, но думаю проще будет переделать считалку на CSS:

jQuery(document).ready(function($) {

  // Добавление динамически div
  var i = 0;
  $(document).on("click", ".btn-add", function() {
    $(".container").append('<div class="element element-'+(i+1)+'"><span class="count">'+(i+1)+'</span> <a href="#" class="btn-del element-'+(i+1)+'">Del</a></div>');
    i++;
  });
  // Удаление div
  $(this).on("click", ".btn-del", function() {
    $(this).closest('.element').remove();
    i--;
    
    var element = document.querySelectorAll('.element');
    var btnDel = document.querySelectorAll('.btn-del');
    var count = document.querySelectorAll('.count');
    for( var номер = 0; номер < element.length; номер++ ){
      element[номер].className = element[номер].className.replace(/ element-\d+/g, "");
      btnDel[номер].className = btnDel[номер].className.replace(/ element-\d+/g, "");
      element[номер].classList.add('element-' + номер);
      btnDel[номер].classList.add('element-' + номер);
      count[номер].textContent = номер;
    }
  });
});
<a href="#" class="btn-add">Add</a>

<div class="container">
  <div class="element element-0"><span class="count">0</span> <a href="#" class="btn-del element-0">Del</a></div>
</div>

2
  • Не совсем то. Мне нужно чтобы element-(номер) сортировался правильно а не текст блоков.
    – VikiMayson
    18 июл 2019 в 18:31
  • @VikiMayson переписал... пришлось использовать JS, чтобы удалять класс через регулярное выражение... заодно всё остальное через JS и дописал, уже не прибегая к jQ. / element-\d+/ — здесь \d+ означет совпадение с любой цифрой... один или несколько раз. P.s. переменная "номер" сделана, чтобы не напугать вас переменными. Вообще не принято создавать их на русском. 18 июл 2019 в 19:08
0

add.addEventListener("click",()=>{
  let key = elements.children.length,
  el = document.createElement("div");
  el.classList.add("element", "element-" + key);
  el.dataset.key = key;
  el.addEventListener("click",()=>{
let next = el,
     i = Number(next.dataset.key);;
while(next = next.nextElementSibling) {
  next.dataset.key = i;
  next.classList.replace("element-" + (++i), "element-" + (i - 1));
}
el.parentNode.removeChild(el);
  });
  elements.appendChild(el);
})
#elements > div {
  padding: 12px;
  background-color: green;
}

#elements > div::before {
  content: attr(class);
}

#elements > div:nth-child(2n) {
  background-color: red;
}
<button id="add">добавить</button>
<div id="elements"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.