如何使用帶有刪除功能的元素附加元素
[英]How to Append a element with a remove function with it
問題描述
我正在嘗試在列表元素上附加一個remove函數。 我已經創建了remove函數，可以附加元素，但是不知道如何使用帶有remove函數的元素來附加元素。
這是代碼
<!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>
提示，評論將不勝感激
2 個解決方案
解決方案1
1 已采納 2013-09-24 02:35:41
嘗試
$("#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();
});
演示： 小提琴
解決方案2
0 2013-09-24 02:37:28
創建<li>將<button> <li>附加到它..然后將其附加到<ol>
嘗試這個
$("#btn2").on('click',function(){
var name = $('#name').val();
var $li=$('<li>', { text: name}); //creating li element.
$li.append($('<button />',{text:"remove","class":"btn3"}).appendTo('ol');
//--^^^^^^^^^---- append created button to lu ---append li to ol
});
如何刪除“附加元素”？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.