Как отследить созданные блоки js

209

25 октября 2018, 05:50

При нажатии на кнопку "ADD", создаются новые элементы. Как их отследить и работать с ними (менять, удалять и т.д.)?

$(function() { 
  $('a.pts').click(function() { 
    var obj = this; 
    var inputPts = $('input').val(); 
    var points = $('div.mmr').append("<p>" + inputPts + "</p>"); 
  }); 
}) 
$(function() { 
  $('a.pts1').click(function() { 
    var newtext = $('div').html(); 
    localStorage.po1 = newtext 
  }); 
}) 
 
$('div.mmr').append(localStorage.po1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#" class="pts">ADD</a> 
<a href="#" class="pts1">UPDATE</a> 
<div class="mmr"></div>

Answer 1

Добавляйте ссылкe на элемент в какой-нибудь массив (объект). Так получите доступ к элементу и сможете с ним работать

const btn = document.getElementById('btn'); 
const container = document.getElementById('divs-container'); 
const divsTemp = []; 
let globalCounter = 0 
 
btn.onclick = function () { 
  const div = document.createElement('div'); 
  div.innerHTML = `Я созданный блок: ${globalCounter++}`; 
  container.appendChild(div); 
  divsTemp.push(div); 
} 
 
const clearTimer = setInterval(() => { 
  if(!divsTemp.length) return; 
  const div = divsTemp.shift(); // получаем первый элемент, попутно удаляя его из массива 
  container.removeChild(div); 
}, 500);

<button id='btn'>Создать блок</button> 
<div id='divs-container'></div>

Answer 2

Можно воспользоваться MutationObserver, который уже давно поддерживается всеми рабочими браузерами. А кроме того, он делает работу с dom-элементами не просто легче, но ещё правильней. Намного правильней, когда dom-контейнер при помощи событий говорит о том, что происходит за его инкапсуляцией.

let container = document.querySelector('.container'); 
let button = document.querySelector('button'); 
 
button.addEventListener('click', () => { 
  let rect = document.createElement('div'); 
 
  container.appendChild(rect); 
}); 
 
let observer = new MutationObserver(mutations => { 
  mutations.forEach(({ 
    addedNodes 
  }) => { 
    addedNodes.forEach(element => element.classList.add('rect')) 
  }); 
}); 
 
let config = { 
  childList: true 
}; 
 
observer.observe(container, config);

.rect { 
  width: 30px; 
  height: 30px; 
  background: tomato; 
  margin: 3px; 
}

<div class="container"></div> 
<button>add</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Вопрос про адаптивный дизайн

Недавно начал изучать адаптивный дизайн и возник теоретический вопрос: Является ли сайт адаптивным (или же отзывчивым) если у него есть горизонтальная...

167

jQuery

Как отследить созданные блоки js

Вопрос про адаптивный дизайн

magnific-popup миниатюра

Время (сек) в Unity

WPF невозможно обновить элемент окна