使用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上的附加按鈕刪除附加文本

回答

相關問題