Question

我想要删除一个将由用户创建的元素（更具体的p标记）。在我的页面中，用户可以通过表单在页面中写入信息，并且还会有一个删除按钮，通过该按钮可以删除他们在页面上写入的元素。这是代码段

function writedesc() {
  var x = document.getElementById("testinput").value;
  var y = document.getElementById("desc").value;

  var para = document.createElement("P");
  var text = document.createTextNode(x);
  para.appendChild(text);

  var area = document.getElementById("wtf");
  wtf.appendChild(para);
  para.style.marginLeft = "20px";
  para.style.marginTop = "20px";

  var para2 = document.createElement("P");
  var text = document.createTextNode(y);
  para2.appendChild(text);

  var area = document.getElementById("wtf");
  wtf.appendChild(para2);
  para2.style.marginLeft = "20px";
  para2.style.marginTop = "20px";


}

function remove() {
  // I want to remove the first para here
}

<html>

<head>
  <title>Cool HTML DOM</title>
  <link rel="stylesheet" href="index.css" type="text/css">

</head>

<body>
  <input type="text" id="testinput" placeholder="product name">
  <input type="text" id="desc" placeholder="more about it">
  <button onclick="writedesc()">Click Here</button>
  <div id="wtf"></div>
  <button onclick="remove()">Remove first child</button>
  <script src="index.js"></script>
</body>

</html>

现在我必须在函数remove()中编写can，它将删除我存储在para变量中的第一个元素。无论如何，我必须从para函数访问remove()变量。我如何从para函数访问remove()变量？ `

Answer 1

var x;

function first(){

  x = 8;
}

function second(){
  x = 2; 
}

以上两个函数都访问相同的x变量

Answer 2

使用全局变量，您可以在任何函数中访问此变量

＆＃13;

var x;
var y;

var para;
var text;

var para2;
var text2;

function writedesc() {

  x = document.getElementById("testinput").value;
  y = document.getElementById("desc").value;

  para = document.createElement("P");
  text = document.createTextNode(x);

  para2 = document.createElement("P");
  text2 = document.createTextNode(y);

  para.appendChild(text);

  var area = document.getElementById("wtf");
  wtf.appendChild(para);
  para.style.marginLeft = "20px";
  para.style.marginTop = "20px";

  
  para2.appendChild(text2);

  var area = document.getElementById("wtf");
  wtf.appendChild(para2);
  para2.style.marginLeft = "20px";
  para2.style.marginTop = "20px";


}

function remove() {
  // I want to remove the first para here
}

＆＃13;

<html>

<head>
  <title>Cool HTML DOM</title>
  <link rel="stylesheet" href="index.css" type="text/css">

</head>

<body>
  <input type="text" id="testinput" placeholder="product name">
  <input type="text" id="desc" placeholder="more about it">
  <button onclick="writedesc()">Click Here</button>
  <div id="wtf"></div>
  <button onclick="remove()">Remove first child</button>
  <script src="index.js"></script>
</body>

</html>

＆＃13;

Answer 3

如果您为<p>标记提供了ID，则可以删除它而无需访问变量para，因此请避免使用全局变量。

function writedesc() {
  var x = document.getElementById("testinput").value;
  var y = document.getElementById("desc").value;

  var para = document.createElement("P");
  para.id = "para1";
  var text = document.createTextNode(x);
  para.appendChild(text);

  var area = document.getElementById("wtf");
  wtf.appendChild(para);
  para.style.marginLeft = "20px";
  para.style.marginTop = "20px";

  var para2 = document.createElement("P");
  para2.id = "para2";
  var text = document.createTextNode(y);
  para2.appendChild(text);

  var area = document.getElementById("wtf");
  wtf.appendChild(para2);
  para2.style.marginLeft = "20px";
  para2.style.marginTop = "20px";
}

function remove() {
    var para1 = document.getElementById("para1");
    if (para1){
        para1.parentNode.removeChild(para1)
    }  
}

Answer 4

定义全局变量g对象并将变量存储为键

var g = {para : "", para2 : ""};

// to access para, use
function printParas() {
console.log(g.para);
console.log(g.para2);

}

function addSomeContent1() {
g.para = "First Random Content for para1";
g.para2 = "First Random Content for para2";
printParas();
}

function addSomeContent2() {
g.para = "Second Random Content for para1";
g.para2 = "Second Random Content for para2";
printParas();
}

function removeContent() {
g.para = "";
g.para2 = "";
printParas();
}

我如何在javascript中使用另一个函数的变量

4 个答案: