Я пытаюсь добавить целое число к идентификатору карты, чтобы можно было удалить его при нажатии кнопки удаления. Любая помощь?

     var variable = '' + 
  '<div id="card+$num.toString(cnt);" class="card col-3" style="width: 18rem;" style="margin-right=3%; margin-right=3%">' + 
  '            <img src="..." class="card-img-top" alt="..." id="image"+String(cnt)>' + 
  '            <div class="card-body">' + 
  '                <h5 class="card-title" id="title"+String(cnt) contentEditable="true"; >Card title</h5>' + 
  '                <p class="card-text" id="desc"+String(cnt) contentEditable="true">Some quick example text to build on the card title and make up the' + 
  '                    bulk of the' + 
  '                    card\'s content.</p>' + 
  '                <a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a>' + 
  '                <a href="#" id="btn"+String(cnt) class="close"+String(cnt)>Delete</a>' + 
  '            </div>' + 
  '        </div>' + 
  '';

  $(".create").click(function(){
    document.getElementById("lastRow").innerHTML+=variable;
  });

  $(".close"+String(cnt)).click(function(){
    console.log("Doulevw!");
    document.getElementById("card"+String(cnt)).hidden=true;
  });
0
agrotis2231 1 Дек 2020 в 21:44

1 ответ

Лучший ответ

При рендеринге динамических элементов с помощью js необходимо знать несколько концепций.

  1. у вас есть слушатель click для вашей кнопки .close. Этот слушатель никогда не сработает, потому что он актуален только для вашей исходной DOM. Но ваша кнопка закрытия отображается динамически, что означает, что слушатель не имеет отношения к вашей кнопке. Это легко решить, прикрепив onclick к кнопке и создав функцию. (пример следует)

  2. Я проверил ваш код, вам НЕ нужно использовать механизм идентификатора для удаления / скрытия элемента card (если вам не нужно запускать запрос POST), вы можете использовать parentNode (пример ниже )

Я внес несколько простых изменений в ваш код:


$(".create").click(function(){
  let element = `
      <div id="card" class="card col- 3" style="width:18rem;style="margin-right=3%; margin-right=3%"><img src="..." class="card-img-top" alt="..." id="image"+String(cnt)><div class="card-body"><h5 class="card-title" id="title" contentEditable="true">Card title</h5><p class="card-text" id="desc" contentEditable="true">Some quick example text to build on the card title and make up the                     bulk of the'                    card\'s content.</p><a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a><a href="#" class="close" onclick='deleteCard(this)'>Delete</a></div></div>`;
  document.getElementById("lastRow").innerHTML+=element;
});

function deleteCard(delBtn){
  delBtn.parentNode.parentNode.hidden = true
}

Обратите внимание на добавленную мной функцию и onclick, который позволяет скрыть действие. Вот ссылка в кодировке, по которой вы можете сами проверить, что я сделал.

Надеюсь, это было полезно, любые другие вопросы будут отличными :)

1
Nir Gofman 1 Дек 2020 в 19:15