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

标签 javascript html

我想创建一个将由用户创建的元素(更具体地说是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 变量中的第一个元素。无论如何,我必须从 remove() 函数访问 para 变量。我如何从 remove() 函数访问该 para 变量? `

最佳答案

如果您给出<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)
    }  
}

关于javascript - 我如何在javascript中使用另一个函数的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41136084/

相关文章:

javascript - 在 JavaScript 中获取反斜杠 (\) 后的字符串值

javascript - 动态创建一个选择,然后更改 ajax 调用以附加 html

javascript - 正则表达式匹配数组表示法

html - 如何防止div里面的元素溢出?

html - 框架集在 IE 浏览器中未删除

javascript - 如何从 C# 服务器中的 POST(或其他 HTTP)请求访问参数?

html - Bootstrap 2 中的网格系统顺序

javascript - "i = (i + 1) % word.length "背后的逻辑是什么

html - 如何删除 Twig 中的空格

javascript - 使用 laravel 验证后,ajax 上的成功函数