gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:12:02 25 4
gpt4 key购买 nike

我想创建一个待办事项列表...添加和删除按钮可以工作,但我想在单击它时删除一个元素...我尝试使用 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>

最佳答案

试试这个:

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

关于javascript - 无法隐藏我使用 javascript 和 jquery 生成的 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54171361/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com