Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

148
Views
JavaScript adding event on element generated element with innerHtml

I want to add an event on an element does doesn't exist in the original HTML (created with innerHtml). When i click nothing happens.

const btnRemove = document.getElementById("remove");

btnMow.addEventListener("click", function mow() {
  if (sMow === true) {
    reqServices.push("Mow Lawn");
    service.innerHTML += `
            <div class="v1">
              <p class="v3-text">Mown Lawn <span id="remove">remove</span></p>
              <p class="v3-dollar"><span>$</span>20</p>
            </div>`;
    sMow = false;
    total += 20;
    totalC();
  }
});

btnRemove.addEventListener("click", function remove() {
  alert("HELLO");
});

I want to add a click event on the element with id remove.

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

btnMow.addEventListener("click", function mow() {
    if (sMow === true) {
        reqServices.push("Mow Lawn");
        service.innerHTML += `
            <div class="v1">
                <p class="v3-text">Mown Lawn <span id="remove">remove</span></p>
                <p class="v3-dollar"><span>$</span>20</p>
            </div>`;
        sMow = false;
        total += 20;
        totalC();
    }
    const btnRemove = document.getElementById("remove");

    btnRemove.addEventListener("click", function remove() {
        alert("HELLO");
    });
});
about 4 years ago · Juan Pablo Isaza Report

0

Another way to do that is creating the elements instead of use the HTML code and a later search. This maybe useful if you, for example, don't want to add an id to the remove tag

btnMow.addEventListener("click", function mow() {
    if (sMow === true) {
        reqServices.push("Mow Lawn");

        var div = document.createElement("div");
        div.className = "v1";
        service.appendChild(div);

        var p1 = document.createElement("p");
        p1.className = "v3-text";
        div.appendChild(p1);

        var p1Text = document.createTextNode("Mown Lawn ");
        p1.appendChild(p1Text);

        var p1Span = document.createElement("span");
        p1Span.setAttribute("id", "remove");
        p1Span.innerText = "remove";
        p1Span.addEventListener("click", function remove() {
            alert("HELLO");
        });
        p1.appendChild(p1Span);

        var p2 = document.createElement("p");
        p2.className = "v3-dollar";
        p2.innerHTML = "<span>$</span>20";
        div.appendChild(p2);

        sMow = false;
        total += 20;
        totalC();
    }
});

As you can see, creating the elements allow you do whatever you want with it. It's longer but you can use a helper function like this:

function appendTag(parent, tagName, className) {
    var tag = document.createElement(tagName);

    if (className)
        tag.className = className;

    parent.appendChild(tag);
    return tag;
}

And rewrite as:

btnMow.addEventListener("click", function mow() {
    if (sMow === true) {
        reqServices.push("Mow Lawn");

        var div = appendTag(service, "div", "v1");
        var p1 = appendTag(div, "p", "v3-text");
        p1.appendChild(document.createTextNode("Mown Lawn "));

        var p1Span = appendTag(p1, "span");
        p1Span.setAttribute("id", "remove");
        p1Span.innerText = "remove";
        p1Span.addEventListener("click", function remove() {
            alert("HELLO");
        });

        var p2 = appendTag(p1, "p", "v3-dollar");
        p2.innerHTML = "<span>$</span>20";

        sMow = false;
        total += 20;
        totalC();
    }
});
about 4 years ago · Juan Pablo Isaza Report

0

var btnremove = document.getElementById("remove");

write this before starting click event

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!