如何擦除特定容器？

Question

我正在尝试自己制作一个待办事项列表并且进展顺利，但我无法删除正确的 div。它总是删除堆中的第一个。如果有人知道答案，我将非常高兴。我不是在创建新的 divs，我基本上是在克隆我制作的模板并将显示设置为 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" class="remove" onclick="suma()">
      <input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
    </div>

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

  </main>

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



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

</html>

Answer 1

在 .addEventListener 中放置函数但不调用它。

d.addEventListener('click',addTarefa)

Answer 2

您无需为元素 ID 而烦恼。 DOM 导航将允许您找到被点击元素的父元素，并将其删除：

<main id="container">

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

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

</main>

（注意我是如何更改 onclick 以便它通过 this 元素）

然后您的删除函数可以简单地找到被单击元素的父元素并将其删除。

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

另外，请注意：在添加新元素的函数中，您应该注意元素 ID 的重复。这将创建无效的 HTML 因为 ID 必须是唯一的。

这是一个 Fiddle 示例。

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" class="remove" onclick="suma(this)">
    <input type="text" placeholder="Escreva aqui..." id="TextoEscondido">
  </div>

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

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

如何擦除特定容器？

How can I erase the specific container?

html

javascript

events

dom