Question

我正在尝试使用remove函数追加一个list元素。我已经创建了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>

提示，评论将不胜感激

Answer 1

尝试

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

Answer 2

创建<li>向其添加<button> ..然后将其附加到<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
});

如何使用remove函数追加元素

2 个答案: