Javascript 如何使用remove函数附加元素_Javascript_Jquery_Html

Javascript 如何使用remove函数附加元素

javascript jquery html

Javascript 如何使用remove函数附加元素,javascript,jquery,html,Javascript,Jquery,Html,我试图附加一个列表元素和一个remove函数。我已经创建了remove函数，可以附加元素，但不知道如何使用remove函数附加元素这是密码 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(docum

我试图附加一个列表元素和一个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>


$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
var listname=$（'#listname'）.val（）；
$（“.container”）。追加（$（“”{
文本：listname
}));
});
$（“#btn2”）。在（'click'，函数（）{
var name=$（'#name'）.val（）；
$（'ol'）。追加（$（''）{
文本：名称
}));
});
$（'ol'）。在（'click'，'btn3'，函数（）{
$（this.parent（'li'）.remove（）；
});
});
清单项目1删除
清单项目2删除
清单项目3删除
附加列表项

小贴士、评论将不胜感激

试试看

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

演示：

试试看

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

演示：

创建

附加

。。然后将其附加到

试试这个

 $("#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
});

$（“#btn2”）。在（'click'，function（）上{
var name=$（'#name'）.val（）；
var$li=$（“”，{text:name}）；//创建li元素。
$li.append（$（''，{text:“remove”，“class:“btn3”}）.appendTo（'ol'）；
//--^^^^^^^^^----将创建的按钮追加到lu---将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
});

$（“#btn2”）。在（'click'，function（）上{
var name=$（'#name'）.val（）；
var$li=$（“”，{text:name}）；//创建li元素。
$li.append（$（''，{text:“remove”，“class:“btn3”}）.appendTo（'ol'）；
//--^^^^^^^^^----将创建的按钮追加到lu---将li追加到ol
});