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

<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>

我对上面的代码有问题。我试图在文本上添加一个按钮。该按钮将是触发删除附加文本的按钮。但是，发生的事情是我无法一个接一个地删除附加文字。带按钮的第一个附加文本仅具有删除所有附加文本的功能。但是我想要发生的是，即使我点击了多次“点击按钮”，它也应该是一次一个。使用jquery上的附加按钮删除附加文本

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

来源

2013-10-11 Ritz de Guzman

你在找这样的事吗？

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>

来源

2013-10-11 14:19:15 enyce12

该死的男人，我是做了几乎相同的答案。另外，为什么使用'''event.preventDefault（）'''执行此任务？ –

对不起;）这是一个坏习惯，谢谢你提到。 – enyce12

感谢您的帮助，但它不能像我需要的那样工作。当你点击“点击按钮”按钮时，它会在文本上添加关闭按钮......当我点击关闭按钮时，附加文本和关闭按钮也将被删除。 –

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

回答

相关问题