使用JavaScript（从HTML）删除JSON元素

我目前正在与您建立一个论坛

• 基本技术：HTML、CSS、JavaScript和NodeJS
• 使用JSON文件名从API检索数据。例如

  \json\myfile.json

我能够获得使用JSON API的请求，但无法删除它们

这是我的密码：

JSON:

HTML:

添加

JavaScript:

 'use strict';

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'json/elements.json', true);
    xobj.onreadystatechange = function() {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(xobj.responseText);
      }
    };
    xobj.send(null);
  }

  function getElements() {
    loadJSON(function(response) {
      var elements = JSON.parse(response);
      var containerElement = document.getElementById("element");
      var titleElement;
      var contentElement;
      var deleteElement;
      for (var i = 0; i < elements.length; i++) {
        titleElement = document.createElement("h1");
        contentElement = document.createElement("p");
        deleteElement = document.createElement("button");
        containerElement.appendChild(titleElement);
        containerElement.appendChild(contentElement);
        containerElement.appendChild(deleteElement);
        titleElement.innerHTML = elements[i].title;
        contentElement.innerHTML = elements[i].content;
        deleteElement.innerHTML = "Delete";
        deleteElement.addEventListener('click', function() {
          console.log(titleElement[i]);
          console.log(contentElement[i]);
        });
      }
    });
  }

function addElement() {
    loadJSON(function(response) {
      var elements = JSON.parse(response);
      var newTitle = document.getElementById('newTitle').value;
      var newContent = document.getElementById('newContent').value;
      console.log("Title: " + newTitle + "     " + "Content: " + 
newContent);
    });
  }

  getElements();

“严格使用”；
函数loadJSON（回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
open（'GET'，'json/elements.json'，true）；
xobj.onreadystatechange=函数（）{
if（xobj.readyState==4&&xobj.status==200）{
回调（xobj.responseText）；
}
};
xobj.send（空）；
}
函数getElements（）{
loadJSON（函数（响应）{
var elements=JSON.parse（响应）；
var containerElement=document.getElementById（“元素”）；
var滴定元素；
var内容元素；
var元素；
对于（var i=0；i

---

我查看了闭包是如何工作的，但我不知道如何将它们应用到我的代码中，在我记录

contentElement

和

titleElement

之后，它返回我

未定义的
。为
contentElement
和
titleElement
获取
undefined
的问题是，但是这里的答案很笼统，不能为您提供最简单的处理方法

见评论：

function getElements() {
    loadJSON(function(response) {
        var elements = JSON.parse(response);
        var containerElement = document.getElementById("element");
        var entryElement;
        var titleElement;
        var contentElement;
        var deleteElement;
        for (var i = 0; i < elements.length; i++) {
            // Create a container for the entry; let's give it a class we'll
            //  use later as well
            entryElement = document.createElement("div");
            entryElement.className = "entry";
            titleElement = document.createElement("h1");
            contentElement = document.createElement("p");
            deleteElement = document.createElement("button");
            // Put these in the entry's container
            entryElement.appendChild(titleElement);
            entryElement.appendChild(contentElement);
            entryElement.appendChild(deleteElement);
            titleElement.innerHTML = elements[i].title;
            contentElement.innerHTML = elements[i].content;
            deleteElement.innerHTML = "Delete";
            deleteElement.addEventListener('click', function() {
                // Here, `this` refers to the delete button that was clicked;
                // remove its parent element:
                var parent = this.parentNode;
                parent.parentNode.removeChild(parent);
            });
            // Add the entry to the main container
            containerElement.appendChild(entryElement);
        }
    });
}


添加
代码或标记中没有提到删除任何内容。你需要给我们一个简短的，基本的例子来说明你在做什么。了解如何创建“删除JSON元素…”解析后，它就不再是JSON了。JSON是用于数据交换的文本表示法。如果你处理的是JavaScript源代码，而不是字符串，那么你就不是在处理JSON。此外，你没有保留解析结果。推送完整代码我会帮助你，你的个人资料显示你回来了。下面的答案是否回答了您的问题？如果没有，可能会发表评论，询问更多信息，或者编辑问题。。。
 'use strict';

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'json/elements.json', true);
    xobj.onreadystatechange = function() {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(xobj.responseText);
      }
    };
    xobj.send(null);
  }

  function getElements() {
    loadJSON(function(response) {
      var elements = JSON.parse(response);
      var containerElement = document.getElementById("element");
      var titleElement;
      var contentElement;
      var deleteElement;
      for (var i = 0; i < elements.length; i++) {
        titleElement = document.createElement("h1");
        contentElement = document.createElement("p");
        deleteElement = document.createElement("button");
        containerElement.appendChild(titleElement);
        containerElement.appendChild(contentElement);
        containerElement.appendChild(deleteElement);
        titleElement.innerHTML = elements[i].title;
        contentElement.innerHTML = elements[i].content;
        deleteElement.innerHTML = "Delete";
        deleteElement.addEventListener('click', function() {
          console.log(titleElement[i]);
          console.log(contentElement[i]);
        });
      }
    });
  }

function addElement() {
    loadJSON(function(response) {
      var elements = JSON.parse(response);
      var newTitle = document.getElementById('newTitle').value;
      var newContent = document.getElementById('newContent').value;
      console.log("Title: " + newTitle + "     " + "Content: " + 
newContent);
    });
  }

  getElements();

function getElements() {
    loadJSON(function(response) {
        var elements = JSON.parse(response);
        var containerElement = document.getElementById("element");
        var entryElement;
        var titleElement;
        var contentElement;
        var deleteElement;
        for (var i = 0; i < elements.length; i++) {
            // Create a container for the entry; let's give it a class we'll
            //  use later as well
            entryElement = document.createElement("div");
            entryElement.className = "entry";
            titleElement = document.createElement("h1");
            contentElement = document.createElement("p");
            deleteElement = document.createElement("button");
            // Put these in the entry's container
            entryElement.appendChild(titleElement);
            entryElement.appendChild(contentElement);
            entryElement.appendChild(deleteElement);
            titleElement.innerHTML = elements[i].title;
            contentElement.innerHTML = elements[i].content;
            deleteElement.innerHTML = "Delete";
            deleteElement.addEventListener('click', function() {
                // Here, `this` refers to the delete button that was clicked;
                // remove its parent element:
                var parent = this.parentNode;
                parent.parentNode.removeChild(parent);
            });
            // Add the entry to the main container
            containerElement.appendChild(entryElement);
        }
    });
}