0

При нажатии на кнопку "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>

2 ответа 2

0

Добавляйте ссылк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>

0

Можно воспользоваться 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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