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

  • Z时代
  • 2024-01-10
  • 分类：问答

<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上的附加按钮删除附加文本

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

回答：

你在找这样的事吗？

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上的附加按钮删除附加文本 的全部内容， 来源链接： utcz.com/qa/257399.html

回到顶部