使用 jQuery 上的追加按钮删除追加的文本

delete an appended text using an appended button on jquery

本文关键字：追加 删除 文本 按钮 jQuery 使用      更新时间：2023-09-26
<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>

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

我需要的是"单击按钮"多次单击，它将生成一个附加文本，上面有一个关闭按钮。关闭按钮将是删除附加文本的按钮，仅适用于该特定文本。

你在寻找这样的东西吗？

斯菲德尔

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>
相关文章：