How can I erase the specific container?-CodePudding

I am trying to make a to-do list by myself and it's going pretty well, but I can't remove the correct div. It always removes the first one in the pile. If anyone knows the answer I would be very very glad. I am not creating new divs, I am basically cloning a template that I've made and setting the display as none.

let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())

function addTarefa() {
  let divtarefa = document.getElementById('TarefaEscondida')
  clone = divtarefa.cloneNode(true)
  clone.id = 'tarefa'
  clone.class = "tarefa"
  container.appendChild(clone)
  clone.setAttribute('display', 'flex')
  clone.setAttribute('class', 'tarefa')
  clone.setAttribute('id', 'tarefa')
}

function suma() {

  let father = document.getElementById('container')
  let son = document.getElementById('tarefa')

  let apaga = father.removeChild(son)
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: aqua;
}

header {
  text-align: center;
  background-color: rgb(255, 208, 0);
}

#container {
  display: flex;
  background-color: beige;
  margin-top: 15px;
  margin-left: 15%;
  margin-right: 15%;
  height: 90vh;
  align-items: stretch;
  padding-top: 8px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}

.tarefa {
  padding: 5px;
  background-color: brown;
  margin-left: 8px;
  margin-right: 8px;
  display: flex;
}

.texto {
  border: none;
  margin-left: 8px;
  background-color: brown;
  color: white;
  width: 90%;
  padding: 8px;
}

::placeholder {
  color: white;
  opacity: 1;
}

.remove {
  float: right;
  height: 40px;
  width: 40px;
  color: #333;
  cursor: pointer;
}

#botao {
  position: fixed;
  background-color: brown;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  bottom: .8%;
  left: 1.5%;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: 4.5rem;
}

#TarefaEscondida {
  padding: 5px;
  background-color: brown;
  /* margin-top: 8px; */
  margin-left: 8px;
  margin-right: 8px;
  display: none;
}

#TextoEscondido {
  border: none;
  margin-left: 8px;
  background-color: brown;
  color: white;
  width: 90%;
  padding: 8px;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>My To Do list</title>
</head>

<body>
  <header id="header">
    <h1>My To do list</h1>
  </header>

  <main id="container">

    <div id="TarefaEscondida">
      <input type="button" value="Feito"  onclick="suma()">
      <input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
    </div>

    <div id='tarefa' >
      <input type="button" value="Feito"  onclick="suma()">
      <input type="text" placeholder="Escreva aqui..." >
    </div>

  </main>

  <div id="botao" onclick="addTarefa()">
    <P>  </P>
  </div>



  <script src="main.js"></script>
</body>

</html>

CodePudding user response：

You don't need to bother with element IDs. DOM navigation will allow you to find the parent of the clicked element, and remove it:

<main id="container">

  <div id="TarefaEscondida">
    <input type="button" value="Feito"  onclick="suma(this)">
    <input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
  </div>

  <div id='tarefa' >
    <input type="button" value="Feito"  onclick="suma(this)">
    <input type="text" placeholder="Escreva aqui..." >
  </div>

</main>

(Notice how I've changed the onclick so it passes this element)

And then your remove function can simply locate the parent of the clicked element and remove it.

function suma(element) {
   element.parentNode.remove();
}

Also, please note: In your function that adds a new element, you should be aware of duplicating element IDs. That will create invalid HTML because IDs must be unique.

Here is a Fiddle example.

let d = document.getElementById('botao')
d.addEventListener('click', addTarefa())

function addTarefa() {
  let divtarefa = document.getElementById('TarefaEscondida')
  clone = divtarefa.cloneNode(true)
  clone.id = 'tarefa'
  clone.class = "tarefa"
  container.appendChild(clone)
  clone.setAttribute('display', 'flex')
  clone.setAttribute('class', 'tarefa')
  clone.setAttribute('id', 'tarefa')
}

function suma(element) {
  element.parentNode.remove();
}

<main id="container">

  <div id="TarefaEscondida">
    <input type="button" value="Feito"  onclick="suma(this)">
    <input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
  </div>

  <div id='tarefa' >
    <input type="button" value="Feito"  onclick="suma(this)">
    <input type="text" placeholder="Escreva aqui..." >
  </div>
</main>

<div id="botao" onclick="addTarefa()">
  <P>  </P>
</div>

CodePudding user response：

In .addEventListener you put function but don't call it.

d.addEventListener('click',addTarefa)