如何擦除特定容器？-有解無憂

我正在嘗試自己制作一個待辦事項串列，并且進展順利，但我無法洗掉正確的 div。它總是洗掉堆中的第一個。如果有人知道答案，我會非常高興。我不是在創建新的 div，我基本上是在克隆我制作的模板并將顯示設定為無。

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>

uj5u.com熱心網友回復：

您無需擔心元素 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 必須是唯一的。

這是一個小提琴示例。

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>

uj5u.com熱心網友回復：

在 .addEventListener 中放置函式但不呼叫它。

d.addEventListener('click',addTarefa)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/429554.html

標籤：javascript html dom 事件

上一篇：過多的DOM元素貨幣符號

下一篇：SecurityContextPersistenceFilter在過濾器鏈完成后清除SecurityContextHolder