選中並刪除

我有一個代碼，在單個元素（#add_text）上點擊添加內容（#text_frame）在另一個元素（#template）內，並且可以拖動此元素（#text_frame）。選中並刪除

$('#add_text').mousedown 
    (
    function() 
    {        
    $('#add_text').css('background-color', 'blue'), 
    $('#template').prepend('<div id="text_frame"></div>'), 
    $('#text_frame').draggable('enable'), 
    $('#text_frame').draggable ({containment:'#safe_area',distance:1}); 
    } 
);

如何做到這一點通過單擊添加的元素，他站了出來，比如它的邊界是不同的顏色，並通過按下另一個按鈕被刪除，以除去例如增加一個項目中的文本？

更新：這是在SSCCE風味的完整代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> 


    <title>Add/Delete</title> 

<style type="text/css"> 

div#template 
{ 
    position: relative; outline: 1px #B7C4CE solid; 
     width: 556px; height: 320px; margin-left: auto; margin-right: auto; 
} 

div#text_frame 
    { 
     position:absolute; outline:1px silver solid; background-color:#F7F9FC; width: 96px; 
     height:24px; margin-top: 34px; margin-left: 32px; cursor: pointer;     
    } 

div#add_text,div#delete_text 
    {  
    position: relative; 
     outline:1px silver solid; background-color:red; width: 99px; height: 20px; 
     margin-top: 15px; margin-left: auto; margin-right: auto;  
    } 
</style> 

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script> 

    <script type="text/javascript"> 

$(document).ready(function(){ 

    /* ------------------- add_text --------------------*/ 

    $('#add_text').hover 
     (
      function() {$('#add_text').css('outline', '1px blue solid');}, 
      function() {$('#add_text').css('outline', '1px silver solid');}      
     ); 

    $('#add_text').mousedown 
     (
      function() 
      {        
       $('#add_text').css('background-color', 'blue'), 
    $('#template').prepend('<div id="text_frame"></div>'), 
       $('#text_frame').draggable('enable'), 
    $('#text_frame').draggable({containment: '#safe_area', distance: 1});  
      }   
     ); 

    $('#add_text').mouseup 
     (
      function() 
      {        
       $('#add_text').css('background-color', 'red'); 
      }   
     ); 

    /* ------------------- select_delete_text --------------------*/ 

    $('#delete_text').hover 
     (
      function() {$('#delete_text').css('outline', '1px blue solid');}, 
      function() {$('#delete_text').css('outline', '1px silver solid');}      
     ); 

    $('#delete_text').mousedown 
     (
      function() 
      {        
       $('#delete_text').css('background-color', 'blue') 
      }   
     ); 

    $('#delete_text').mouseup 
     (
      function() 
      {        
       $('#delete_text').css('background-color', 'red'); 
      }   
     );  

    $('#text_frame').click // dont work ??? 
     (
      function() 
      {        
       $('#text_frame').css('outline', '1px black solid'); 
      }   
     );   
}); 

</script> 

</head> 

<body> 

    <div id="template"></div> 

     <div id="add_text" class="font_button">add elements</div>   
     <div id="delete_text" class="font_button">delete elements</div> 

<br /><br />1) Press the button several times "add elements"<br /> 
2) drag items<br /><br /> 

how to make:<br /><br /> 
1) Select Item<br /> 
2) change of style (outline color for example) element when it is selected<br /> 
3) Remove the chosen item by pressing the button "delete elements"<br /> 

</body> 
</html>

我使用jQuery使用jQuery UI。

來源

2010-11-20 gena

我不知道解決你的問題（因爲我真的不明白你問什麼），但一個快速提示Stack Overflow上發帖時：儘量標記您的問題適當。我添加了jQuery和JavaScript標籤。你所擁有的'刪除'和'選擇'，並不真正告訴任何人這個問題。另外，在你的文章中指出你正在使用jQuery框架和jQuery UI一起使用JavaScript。 – pinkfloydx33 2010-11-20 17:08:03

嘗試：

var newNode = $('<div></div>').attr('id','text_frame').css('border','1px solid red'); 
$('#template').prepend(newNode);

來源

2010-11-20 17:07:04 Kos

回答

相關問題