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

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

我需要构建类似于站点的Notes应用，并且必须通过单击x图标删除特定的div。

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

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>

解决方法

1. 您不能重复使用ID，而应使用类
2. 您可能想做const months = ['Jan','March','April','June']; months.splice(2,1,'newVal'); console.log(months);进行连接
3. 从noteId.innerHTML += str中删除onclick="remove()"，并向该<i class="fa fa-times-circle icon" aria-hidden="true"></i>添加一类remove
4. 将索引添加为属性

<i>

---

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()
  }
})

PS：如果要删除div而不是重写，则可以

<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>

,

如果您只是想从屏幕中删除元素，而没有对视图中其余元素进行排序，那么最简单的方法是使用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>