Как добавить в параметры функции другую функцию для удаления элемента?

Question

На странице отображается 6 карточек (данные взяты из массива).

Мне нужно написать функцию renderCard, которая принимает в параметрах данные одной карточки name, link и функцию-колбэк для удаления deleteCard.

//Функция удаления
const deleteCard = (e) => {
  const cards = e.target.closest(".card");
  cards.remove(cards);
};

//Функция, в параметрах которой должна быть еще функция удаления
function renderCard({ name, link }, deleteCard) {
  //Скопировали шаблон
  const cardTemplate = document.querySelector("#card-template").content;
  const cardElement = cardTemplate
    .querySelector(".places__item")
    .cloneNode(true);
  //Установили значения вложенных элементов
  cardElement.querySelector(".card__title").textContent = name;
  cardElement.querySelector(".card__image").src = link;
  const cardImage = cardElement.querySelector(".card__image");
  cardImage.src = link;
  cardImage.alt = name;
  // обработчик клика, по которому будет вызван переданный в аргументах колбэк (функция).
  cardElement.querySelector(".card__delete-button").onclick = deleteCard;
  //возвращаем созданную карточку
  return cardElement;
}


initialCards
  .map(renderCard)
  .forEach((cardElement) => placesList.append(cardElement));

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

Если же не указывать в параметрах функцию удаления, то все работает.

Вопрос: как добавить функцию deleteCard в параметры функции renderCard, чтобы кнопка удаления срабатывала и выбранная карточка удалялась со страницы?

Answer 1

функция map вызывает переданный callback с тремя параметрами.

Поэтому при использовании .map(renderCard) в renderCard будут переданы три параметра: объект, индекс и массив.

Чтобы передать нужный параметр, нужно либо переписать вызов на

.map(item => renderCard(item, deleteCard ))

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

БЛОГ НА HUSL

Как добавить в параметры функции другую функцию для удаления элемента?

Ответы (1 шт):