CODEWITHSUNDEEP
javascripthtmlinteger
agrotis2231
agrotis2231

Reputation: 19

Adding an integer to string

I am trying to add an integer to the card id so that I can delete it when pressing the delete button. Any help?

     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;
  });

Upvotes: 0

Views: 67

Answers (1)

Nir Gofman
Nir Gofman

Reputation: 164

There are a few concepts that you have to know when rendering dynamic elements with js.

  1. you have a click listener for your .close button. This listener will never fire because this listener is relevant only for your initial DOM. But your closing button is rendered dynamically, which means that listener not relevant for your button. Easily solving that by attaching onclick to the button, and creating a function. (example follows)

  2. I inspected your code, you DON'T have to use id mechanism to delete/hide your card element (unless you need to fire POST request), you can use parentNode (example follows)

I made some simple changes to your code:


$(".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
}

Notice for the function I added and the onclick that enables the hiding action. Here is a codeped link for you to test by your self what I did.

Hope this was helpful, any other questions will be great :)

Upvotes: 1

Related Questions