如何在單個文本框中添加多個聯繫電話號碼，併爲每個使用javascript添加的文本添加一個X（清除）按鈕？

Question

如何在單個文本框中添加多個聯繫人編號，並且爲每個使用javascript添加的文本添加一個X（清除）按鈕？

下面是我的HTML頁面的一部分

Contact No:<input type="text" id="no"><input type="button" value="ADD" id="add" onclick="javascript:addContact();"> 
<input type="text" id="text_name" style="width: 300px;height:50px;" /> 

這裏是我的javascript函數

function addContact(){ 

var temp = document.createElement("input"); 
temp.innerHTML="<input type='search' value='' alt='clear' >"; 

var contact_added=document.getElementById("text_name").value; 
var contact=document.getElementById("no").value; 

document.getElementById("text_name").value=contact+temp+contact_added; 

} 

這是我得到我的輸出

！[我的輸出]

但是我需要的是對於我輸入的每一個文本，都應該遵循一個清晰的我可以清除選定的文本塊

Answer 1

function addContact(){ 
temp="<input type='search' value=''.  alt='clear' >"; 
var contact_added=document.getElementById("text_name").value; 
var contact=document.getElementById("no").value; 
document.getElementById("text_name").value=contact+temp+contact_added; 
} 

但是，這並不能解決您的問題。我認爲這不是一個好主意，用輸入和按鈕做這件事。這隻會讓它變得複雜。 起初使形式與一個隱藏字段：

<form action="submit.php" method="post"> 
<input name="contacts" id="contacts_hidden" style="display:none"> 
</form> 
<div id="contacts"> 
</div> 
//your submit button and input 

現在你可以這樣做：

contacts=[]; 
function addContact(){ 
     newcontact=document.getElementById("no");  
contacts.push(newcontact.value); 
newcontact.value=""; 
render(); 
} 

function delete(i){ 
contacts.splice(i,1); 
render(); 
} 
//this takes the contacts array and adds it to the page + hidden submit field 
function render(){ 
    hidden=document.getElementById("contacts_hidden"); 
all=document.getElementById("contacts"); 
content=""; 
for(i=0;i<contacts.length;i++){ 
//add a delete button 
content+=contacts[i]+"<a href='javascript:delete("+i+")'>Delete</a>"; 
} 
all.innerHTML=content; 
hidden.value=contacts.join(";"); 
}