CODEWITHSUNDEEP
javascript
Aram
Aram

Reputation: 39

Add dynamic tags in js

Hope you are doing well.

I have an input and when I enter a number and press on button it should create *x p tags. When I update the value of input and press on button it should display new *x p tags but it does not remove the previous value and adds new one. Here is my code.

Thank you!

create.addEventListener("click" , () => {
    let inp = inp1.value
    for(let i = 0; i < inp ; i++){
        let newELement = document.createElement("p")
        newELement.innerHTML = i+1
        document.body.append(newELement)

    }
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <input type="text" name="" id="inp1">
        <br>
        <button id="create">Create</button>
</body>
<script src="script.js"></script>
</html>

Upvotes: 1

Views: 769

Answers (2)

marsnebulasoup
marsnebulasoup

Reputation: 2660

As I see it, when a user clicks Create, you want to:

  1. Remove the previous tags, if any exist
  2. Create and add the new tags

You've gotten step 2 down already, but you just need to remove the tags before you render the new ones, to get your desired output.

The easiest way to do this would be to, instead of placing the tags directly in the body, place them in a separate div, specifically for tags. Then you just empty that div when Create is clicked.

So, in your HTML, you add a div specifically for the tags:

<body>
    <input type="text" name="" id="inp1">
    <br>
    <button id="create">Create</button>
    <div id="tags"></div>
</body>
<script src="script.js"></script>

...and, in your JS, you just place the tags in that div, instead of the body, whilst emptying it every time Create is clicked:

let tags = document.getElementById("tags")
create.addEventListener("click" , () => {
    let inp = inp1.value
    tags.innerHTML = "" // empty tags div first
    for(let i = 0; i < inp ; i++){
        let newELement = document.createElement("p")
        newELement.innerHTML = i+1
        tags.append(newELement) // add to tags div, not body

    }
})

Run and edit this code online

Upvotes: 1

Sandrin Joy
Sandrin Joy

Reputation: 1184

For this particular scenario , you can use a common class for all the creating elements

By doing this , we can get all the existing elements of that particular class and remove it in a single step.

create.addEventListener("click" , () => {
  document.querySelectorAll('.nums').forEach(e => e.remove());

    let inp = inp1.value
    for(let i = 0; i < inp ; i++){
        let newELement = document.createElement("p")
        newELement.className += " " + "nums";
        newELement.innerHTML = i+1
        document.body.append(newELement)

    }
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <input type="text" name="" id="inp1">
        <br>
        <button id="create">Create</button>
</body>
<script src="script.js"></script>
</html>

Upvotes: 1

Related Questions