时间戳

首页 > 解决方案 > 无法隐藏我用 javascript 和 jquery 生成的 html 元素

javascript - 无法隐藏我用 javascript 和 jquery 生成的 html 元素

问题描述

我想创建一个待办事项列表....添加和删除按钮可以工作，但是当我单击它时我想删除一个元素...我尝试使用 jquery，但是当我单击 javascript 生成的元素时它不起作用，但是当我在页面上初始的 html 元素上进行测试时，它可以工作。问题是什么 ？这是代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap    /3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>

<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">



<div id="div1">
  <h1>To do app</h1>
  <input type="text" name="" value="" id="inp">
  <button type="button" name="button" onclick="adauga()">Adauga</button>
  <button type="button" name="button" onclick="sterge()">Sterge</button>
  <hr></hr><br>
</div>

 <h5 id="xxx">jquery</h5>

 <script>



function adauga() {
var cuvant = document.getElementById('inp').value;


var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

}

function sterge() {

var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);

}

$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});

</script>

</body>
</html>

标签： javascriptjqueryhtml

解决方案

试试这个：

$(document).ready(function(){
 $("body").on("click","p", function(){
  $("p").hide();
 });
});

片段：

function adauga() {
var cuvant = document.getElementById('inp').value;


var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

}

function sterge() {

var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);

}

$(document).ready(function(){
 $("body").on("click","p", function(){
  $(this).hide();
 });
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap    /3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>

<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">



<div id="div1">
  <h1>To do app</h1>
  <input type="text" name="" value="" id="inp">
  <button type="button" name="button" onclick="adauga()">Adauga</button>
  <button type="button" name="button" onclick="sterge()">Sterge</button>
  <hr></hr><br>
</div>

 <h5 id="xxx">jquery</h5>

</body>
</html>

推荐阅读