Question

<html>
    <head>
        <title></title>
    </head>
    <body>
        <button id="btn_id">CLICK THE BUTTON</button> RESULTS:
        <div id="result"></div>
        <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
        <script type="text/javascript">
        $("#btn_id").click(function () {
            $("#result").append("<button type='button' id='btn_id2' class='close pull-right' aria-    hidden='true'>&times;<\/button>" + "<pre class='one'>Sample text<\/pre>");

            $("#btn_id").click(function () {
                $("#btn_id").remove();
                $(".one").empty();

            });
        });
        </script>
    </body>
</html>

我在上面的代码上遇到了问题。我正在尝试用一个按钮附加文本。该按钮将是触发删除附加文本的按钮。但是发生的事情是我无法逐一删除附加的文本。带按钮的第一个附加文本只能删除所有附加文本。但我想要发生的是，它应该是一次一个，即使我多次点击“点击按钮”。

我需要的是点击“点击按钮”多次，它会产生一个带有关闭按钮的附加文本。关闭按钮将是删除附加文本的按钮，仅用于该特定文本。

Answer 1

你在找这样的东西吗？

jsfiddle

JavaScript的：

$("#btn_id").on('click', function(){
    $("#result").append("<div><button type='button' id='btn_id' class='close pull-right' aria-hidden='true'>&times;</button>"+"<pre>Sample text</pre></div>");
});

$(document).on('click', 'button.close', function(){        
    $(this).parent().remove();
});

HTML：

<button id="btn_id">CLICK THE BUTTON</button>
RESULTS: <div id="result"></div>

使用jquery上的附加按钮删除附加文本

1 个答案: