Question

0

138

Views

JavaScript Function

Hello everybody I have this code that I have made alone.

function appearafter() {
  document.getElementById("buttonappear").style.display = "block";
  document.getElementById("button").style.display = "block";
  document.getElementById("hinzufuegen").style.display = "none";

  function myFunction() {
    var itm = document.getElementById("myList2").lastChild;
    var cln = itm.cloneNode(true);
    document.getElementById("myList1").appendChild(cln);
  }



  function allFunction() {
    myFunction();
    appearafter();

  }

#button {
  display: none;
}

#buttonappear {
  display: none;
}

#test {
  width: 300px;
  height: 300px;
  background-color: red;
}

<!DOCTYPE html>
<html>

<body>
  <button id="hinzufuegen" onclick="allFunction()">ADD</button>
  <div id="myList1">
    <button id="button" onclick="">DELETE</button>
    <div id="myList2">
      <div id="test">

      </div>
    </div>

  </div>


  <button onclick="allFunction()" id="buttonappear">ADD</button>










</body>

</html>

What I want to make is that the red square whenever you are clicking on the ADD button it will be a clone and when you click on the DELETED button that the clone is deleted. Can somebody help me, please?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T12:12:38.996Z

In addition to missing } as was mentioned in the comments, there was a not-so-obvious problem with finding the <div> to clone. The lastChild was actually a text node containing the \n (newline), after the <div>. It's better to search for <div> by tag:

var itm = document
          .getElementById('myList2')
          .getElementsByTagName('div')[0];

Since there's only one <div> we can use the zero index to find this first and only one.

And for delete function you can use a similar approach and get the last <div> and remove it.

function appearafter() {
  document.getElementById("buttonappear").style.display = "block";
  document.getElementById("button").style.display = "block";
  document.getElementById("hinzufuegen").style.display = "none";
}

function myFunction() {
  var itm = document.getElementById("myList2").getElementsByTagName("div")[0];
  var cln = itm.cloneNode(true);
  document.getElementById("myList1").appendChild(cln);
}

function deleteFunction() {
  var list1 = document.getElementById("myList1");
  var divs = Array.from(list1.getElementsByTagName("div"));

  // If the number of divs is 3, it means we're removing the last
  // cloned div, hide the delete button.
  if (divs.length === 3) {
document.getElementById("button").style.display = "none";
  }

  var lastDivToDelete = divs[divs.length - 1];

  list1.removeChild(lastDivToDelete);
}

function allFunction() {
  myFunction();
  appearafter();
}

#button {
  display: none;
}

#buttonappear {
  display: none;
}

#test {
  /* make it smaller so it's easier to show in a snippet */
  width: 30px;
  height: 30px;
  background-color: red;
}

<button id="hinzufuegen" onclick="allFunction()">ADD</button>
<div id="myList1">
  <button id="button" onclick="deleteFunction()">DELETE</button>
  <div id="myList2">
<div id="test"></div>
  </div>
</div>

<button onclick="allFunction()" id="buttonappear">ADD</button>

0

138

JavaScript Function

1 answers

0

Find remote jobs

Andres GPT