如何从页面中删除特定的 div

Question

我需要构建类似网站的笔记应用程序，我必须通过单击 x 图标来删除特定的 div。

我认为我需要使用拼接函数从数组中删除一个对象，但我无法从中删除特定对象。

var notesArr = []

function objToArr() {
  noteObj = {
    text: textAreaDv.value,
    date: dateInput.value,
    time: timeInput.value,
  }
  notesArr.push(noteObj)
   //  console.log(notesArr)
  printTohtml()

}

function printTohtml() {
  var str = ""
  for (i = 0; i < notesArr.length; i++) {
    str += '<div class="col-3 noteDv id="noteDvid">'
    str += '<i class="fa fa-times-circle icon" aria-hidden="true" onclick="remove()"></i>'
    str += '<div class="textBox">'
    str += '<div class="textDv">' + notesArr[i].text + '</div>'
    str += '<div class="timeDV">' + notesArr[i].date + '</div>'
    str += '<div class="dateDv">' + notesArr[i].time + '</div>'
    str += '</div>'
    str += '</div>'
  }
  noteId.innerHTML = str
}

function remove() {
  notesArr.splice(0)
}

<div class="container">
  <div class="row mt-5">
    <div class="col-2"></div>
    <div class="form-group col-8">
      <label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
      <textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
    </div>
  </div>
  <div class="row buttonRow">
    <div class="col-8 offset-2">
      <div class="row pl-5">
        <button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>

        <button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>

        <input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">

        <input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      </div>
    </div>
  </div>
  <div class="row" id="noteId">
    <div class="col-3 noteDv" id="noteDvid">
      <i class="fa fa-times-circle icon" aria-hidden="true"></i>
      <div class="textBox">
        <div class="textDv">text</div>
        <div class="timeDV">time</div>
        <div class="dateDv">date</div>
      </div>
    </div>

  </div>
</div>

Answer 1

1. 您不能重复使用 ID，请改用类
2. 您可能想要使用noteId.innerHTML += str 进行连接
3. 从<i class="fa fa-times-circle icon" aria-hidden="true"></i> 中删除onclick="remove()" 并在<i> 中添加一个remove 类
4. 将索引添加为属性

str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'

---

// a click in the output div
document.getElementById("noteId").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) { // it was the remove that was clicked
    notesArr.splice(tgt.dataset.idx,1); // take it IDX and remove the item
    printTohtml(); // re-render
  }
})

---

var notesArr = []

function objToArr() {
  noteObj = {
    text: textAreaDv.value,
    date: dateInput.value,
    time: timeInput.value,
  }
  notesArr.push(noteObj)
   //  console.log(notesArr)
  printTohtml()

}

function printTohtml() {
  var str = ""
  for (i = 0; i < notesArr.length; i++) {
    str += '<div class="col-3 noteDv">'
    str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
    str += '<div class="textBox">'
    str += '<div class="textDv">' + notesArr[i].text + '</div>'
    str += '<div class="timeDV">' + notesArr[i].date + '</div>'
    str += '<div class="dateDv">' + notesArr[i].time + '</div>'
    str += '</div>'
    str += '</div>'
  }
  noteId.innerHTML = str;
}
document.getElementById("noteId").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) {
    notesArr.splice(tgt.dataset.idx,1);
    printTohtml()
  }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container">
  <div class="row mt-5">
    <div class="col-2"></div>
    <div class="form-group col-8">
      <label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
      <textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
    </div>
  </div>
  <div class="row buttonRow">
    <div class="col-8 offset-2">
      <div class="row pl-5">
        <button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>

        <button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>

        <input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">

        <input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      </div>
    </div>
  </div>
  <div class="row" id="noteId"></div>
</div>

PS：如果你想删除div而不是重写，你可以这样做

document.getElementById("noteId").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) { // it was the remove that was clicked
    this.closest(".noteDv").remove()
  }
})

Answer 2

如果您只是想从屏幕中删除元素而不在视图中对其余元素进行排序 - 那么最简单的方法是使用node.removeChild(child) 方法：

<div id="container">
<h3>Click on a link to remove it !</h3>
<a href='#' onclick='this.parentNode.removeChild(this);'>Hot summer</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Pretty Autumn</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Cold winter</a>
</div>