Is there a way so that elements which are getting added inside javascript function on the click of array of elements should be added only once?

Question

Pre-Requisite: allPanelElems1[j] has elements such as t1, t2, t3 etc. which are div elements.

I am calling the javascript function handlePanelClick1 on array of elements. Inside the function I am adding up some other element i.e apiinfo. Now this function is called for each of element inside array allPanelElems1[j]. When a user clicks on any element of allPanelElems1[j] (let's say t1), then inside function element apiinfo is added successfully but when user clicks on the same element (t1) again then the element apiinfo is added again.

Is there a way, so that when user click on any element for the first time the apiinfo element should be added. But if the user calls the element again then apiinfo should not be added. Similarly for other elements t2, t3 etc ?

var allPanelElems1 = accordionElem.querySelectorAll(".panel1");
for (var j = 0, len1 = allPanelElems1.length; j < len1; j++) {
  allPanelElems1[j].addEventListener("click", handlePanelClick1);
}

function handlePanelClick1(event) {
  if (event.currentTarget.getAttribute('class').indexOf('active') >= 0) {
    event.currentTarget.classList.remove("active");
  } else {
    prod1 = {
      "Testcase": [{
          "apiName": " demoAPIname1",
          "request": "req",
          "response": " res"
        },
        {
          "apiName": " demoAPI name2",
          "request": " req",
          "response": "res"
        }

      ]
    };

    var projectBody1 = document.createElement("div");
    for (var propt1 in prod1) {
      var projectBody2 = document.createElement("div");
      var project1 = prod1[propt1];

      for (var i in project1) {
        var temp = document.createElement("div");
        var apiname = project1[i].apiName;
        var request1 = project1[i].request;
        var response1 = project1[i].response;

        var t1 = document.createElement("div");
        var r1 = document.createElement("div");
        var t2 = document.createElement("div");
        var r2 = document.createElement("div");
        r1.innerHTML = request1;
        r2.innerHTML = response1;
        t1.appendChild(createPanel("request", r1, "apidata"));
        t2.appendChild(createPanel("response", r2, "apidata"));

        temp.appendChild(t1);
        temp.appendChild(t2);

        projectBody2.appendChild(createPanel(apiname, temp, "apipanel"));
      }

    }
    projectBody1.appendChild(createPanel("apiinfo", projectBody2, "apititle"));

    var accordion4 = event.currentTarget; //THIS LINE I AM ASSIGNING MY current element
    accordion4.appendChild(projectBody1);

    var allPanelElems4 = accordion4.querySelectorAll(".panel");
    for (var i = 0, len = allPanelElems4.length; i < len; i++) {
      allPanelElems4[i].addEventListener("click", handlePanelClick);
    }
    event.currentTarget.classList.add("active");
  }

  event.stopPropagation();
}

Please post a working version of the code, including markup and javascript, that people here can run, debug and then help you with. — rmn, Sep 12 '18 at 07:26
Hi Please find jsfiddle link for the same : https://jsfiddle.net/swati004/x4Lmzack/1/ — swati, Sep 12 '18 at 08:19
In this while clicking any testcase lets say Testcase1 inside demoname3, it adds an element apiinfo but if you double click on it then again apiinfo is getting added. i just want to add element apiinfo for each testcase only once. — swati, Sep 12 '18 at 08:22

Elias · Accepted Answer · 2018-09-12T08:16:58.493

I mean this sounds pretty stupid but couldn't you just clear the element's child/s before adding the new one? So It would only ever exist once?

element.innerHTML = "";
...
...
element.appendChild(child);

In case speed matters: Children removal ... sounds bad xD

Or you could check if the child count is more than 1

if(div.childNodes.length > 1) return

Check a specific ID

let children = Array.from(div.childNodes);
for(let i = 0; i < children.length; i++) {
    if(children[i].id == "onlyOnce") return;
}
// Append child then as following: 
let childElement = document.createElement("div");
childElement.id = "onlyOnce";
div.appendChild(childElement);

EDIT:

Greeting Elias :D

No problem :) In case it really worked, you could accept it as the answer =) — Elias, Sep 12 '18 at 08:32

Is there a way so that elements which are getting added inside javascript function on the click of array of elements should be added only once?

1 Answers1