Within Javascript is there a way to duplicate an HTML wrapper without its "Event Listeners" losing their functionality?

Question

Within Javascript is there a way to duplicate an HTML wrapper without its "Event Listeners" losing their functionality?

226 Views Asked by SamBoone At 08 March 2022 at 17:06

So within my Javascript I am able to duplicate my HTMl Id="characters" wrapper only once. I know it should technically be a "class" rather than an "Id" because it will be a duplicated "Id", but for some reason I don't get; when I change my "getElementById" to a "getElementsByClassName" and my HTML "Id" to a "class" it doesn't duplicate at all. Also because I am using clone.Node(true), I am losing the functionality of my "addEventListeners" in the duplicated wrapper. Is there a way to correct this using only vanilla Javascript? And as if this isn't annoying enough, my duplicated wrapper is throwing itself out of my CSS grid it seems. its all very tedious and troublesome, and so I thank you for any advice I can get.

Here is my current HTML.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
        <h1><!--D&D DM Tool--><h1>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <div id="header-container">
            <h1 id="header">Game Tools</h1>
        </div>

        <div class="importantbuttons">
            <button id="resetbutton">Next Round</button>
            <button id="orderbutton">Order</button>
            <button id="zerobutton">Zero</button>
            <button id="deadremoverbtn">Bring Out the Dead!</button>
            <button id="addnpcbtn">Add NPC</button>
        </div>

        <div id="grid"> 
            <div class="characters">
                <div id="subgrid" class="subgrid" >
                    <div class="name-bloodiedstuff">
                        <div class="halfWayDown"></div>
                        <div class="character-name-display">Name</div>
                        <button class="name-submit-btn">Submit</button>
                        <input type="text" class="input-name-el" placeholder="Name">
                        <div class=int-stuf>
                            <div class="roll-display">Iniative</div>
                            <button class="iniativebtn">Submit</button>
                            <input type="number" class="iniative-roll-el" placeholder="Iniative Roll">
                        </div>
                        <div class="healthpoints-display">Healthpoints</div>
                        <button class="hp-submit-btn">Submit</button>
                        <input type="number" class="input-hp-el" placeholder="Total HealthPoints">
                        <button class="hp-deductin-btn">Submit</button>
                        <input type="number" class="input-hp-deduction-el" placeholder="Damage">
                    </div>
                    <div class="weapons-display">Weapons</div>
                    <button class="weapon-btn">Submit</button>
                    <input type="text" class="weapon-input-el" placeholder="Weapons">
                    <button class="active-btn" class="button">Active</button>       
                </div>
            </div>
        </div>
    </body>
    <script src="mainCopy.js"></script>
</html>

Here is my current Javascript duplication function.

addNpcBtn.addEventListener("click",function(){
    var characterSubGrids=document.getElementsByClassName("characters");
    console.log(characterSubGrids[0]);
    var characterSubGridsClone=characterSubGrids[0].cloneNode(true);
    let grid=document.getElementById("grid");
    console.log(grid);
    grid.appendChild(characterSubGridsClone);
});

Original Q&A

There are 1 best solutions below

**Shawn** · Accepted Answer · 2022-03-08T17:14:15.397000

From the MDN article on cloneNode

Cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties (e.g., node.onclick = someFunction).

It seems like cloneNode might already be ignoring the event listeners you're trying to ignore.

If you're trying to clone a <div> in a way that conserves the event listeners on its <button> children, I don't think the DOM has a method for that. Instead, you'll have to attach the same event listeners to the new cloned buttons. Something like the following:

// Fetch the container and save that element as a constant for future use
const container = document.querySelector('#container')
// Create the addHandlers function for future use
function addHandlers (span) {
  // Find the first button child of the element provided as first parameter
  const button = span.querySelector('button')
  // Add a click event listener to that button
  button.addEventListener('click', () => {
    // On click, clone the parent element (the span, not the button)
    const clone = span.cloneNode(true)
    // Find the first input child of this new clone
    const input = clone.querySelector('input')
    // Set its value to the empty string (by default, the clone would conserve the value of the original)
    input.value = ''
    // Add handlers to the clone which were lost during cloning
    addHandlers(clone)
    // Add the clone into the DOM as a new, last child of the container
    container.appendChild(clone)
  }, false)
}
// Find all elements with class name 'duplicatable' and run the `addHandlers` function on each element
document.querySelectorAll('.duplicatable').forEach(addHandlers)

<div id="container">
  <h2>Characters</h2>
  <span class="duplicatable">
    <button>Add a new character</button>
    <input type='text' placeholder='name' />
  </span>
</div>

Within Javascript is there a way to duplicate an HTML wrapper without its "Event Listeners" losing their functionality?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DOM

Related Questions in DUPLICATES

Related Questions in CLONENODE

Trending Questions

Popular # Hahtags

Popular Questions