gpt4 book ai didi

javascript - 如何使用删除功能追加元素

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

我正在尝试附加一个带有删除函数的列表元素。我已经创建了删除函数,并且可以附加该元素,但不知道如何使用删除函数附加该元素。

这是代码

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
var listname = $('#listname').val();
$(".container").append($('<ol>', {
text: listname
}));
});


$("#btn2").on('click', function () {
var name = $('#name').val();
$('ol').append($('<li>', {
text: name
}));
});

$('ol').on('click', '.btn3', function () {
$(this).parent('li').remove();

});

});
</script>
<title></title>
</head>

<body>
<ol>
<li>List item 1 <button class="btn3">remove</button></li>
<li>List item 2 <button class="btn3">remove</button></li>
<li>List item 3 <button class="btn3">remove</button></li>
</ol>
<form>
<input id="name" type="text"> <button id="btn2">Append list items</button>
</form>
</body>
</html>

提示、评论将不胜感激

最佳答案

尝试

$("#btn2").on('click', function () {
var name = $('#name').val();
$('<li>', {
text: name
}).appendTo('ol').append($('<button />', {
'class': 'btn3',
text: 'Remove'
}))
});

如果ol是动态添加的

$(document).on('click', 'ol .btn3', function () {
$(this).closest('li').remove();
});

演示:Fiddle

关于javascript - 如何使用删除功能追加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18972033/

25 4 0
文章推荐: javascript - 单击时渲染主干 View (通过路由器推送状态)
文章推荐: html - Bootstrap 高级下拉搜索
文章推荐: html -
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com