Динамически добавляемый удаляемый контент с помощью jQuery

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

Это можно сделать следующим образом:

Начнем с ‹button›, нажав, чтобы добавить контент в ‹div› в HTML:

<html>
  <head>
  </head>
  <body>
    <button id="my-button">Click to Add</button>
  
    <div id="content-container">
      <!-- Content will appear here -->
    </div>
  </body>
</html>

Затем давайте добавим функцию по щелчку, которая вызывается при нажатии кнопки в наш файл javascript:

var addedElements = [];
var elementNum = 0;
$('#my-button').on('click', function() {
   // code to add new element will be called here
});

Теперь давайте напишем код, который фактически создаст новый элемент:

var addedElements = [];
var elementNum = 0;
$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(codeToAddElement);
  elementNum++;
});

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

var addedElements = [];
var elementNum = 0;
$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(codeToAddElement);
  elementNum++;
});
$('body').on('click', '.added-content', function() {
  // code to remove from screen goes here
});

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

var addedElements = [];
var elementNum = 0;
$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(codeToAddElement);
  elementNum++;
});
$('body').on('click', '.added-content', function() {
  var clickedId = $(this).attr('id');
});

Затем мы отформатируем идентификатор, чтобы использовать его для выбора правильного идентификатора, а затем удалим элемент из массива addedElements.

var addedElements = [];
var elementNum = 0;
$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(elementNum);
  elementNum++;
});
$('body').on('click', '.added-content', function() {
  var clickedId = $(this).attr('id');
  clickedId = clickedId.split('-')[1];
  addedElements.splice(clickedId, 1);
});

Наконец, мы изменим отображение массива addedElements. очистите содержимое # content-container и воссоздайте оставшиеся элементы:

var addedElements = [];
var elementNum = 0;
$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(elementNum);
  elementNum++;
});
$('body').on('click', '.added-content', function() {
  var clickedId = $(this).attr('id');
  clickedId = clickedId.split('-')[1];
  addedElements.splice(clickedId, 1);
  
  var tempArr = addedElements.map(x => x);
  addedElements = tempArr.map(x => x);
$('#content-container').html("");
for (let i = 0; i<addedElements.length; i++) {
   var codeToAddElement = '<div class="added-content"' + 
                           'id="add-' + i + '">'+
                           'Add #' + addedElements[i] +
                          '</div>';
   $('#content-container').append(codeToAddElement);
}
});

Проверьте это на CodePen: https://codepen.io/joelmasters/full/NyyrNo/

Спасибо за чтение. Если у вас есть более эффективный способ сделать это, дайте мне знать!

Динамически добавляемый удаляемый контент с помощью jQuery

Вопросы по теме