刪除所有鏈接並根據點擊鏈接的ID刪除文本

Question

我需要一些JavaScript代碼的幫助。我有三個鏈接，每個鏈接都有一個不同的ID，我想要做的是，當我點擊其中一個鏈接時，腳本獲取ID，然後刪除所有三個鏈接，並在該位置放置一個文本例如：

<div id="main">  
    <div> 
    <div id="links"> 
     <a id="choice1" href="#footer" onclick="createDiv();removeLink();">choice1</a> 
     <a id="choice2" href="#footer" onclick="">choice2</a> 
     <a id="choice3" href="#footer" onclick="">choice3</a> 
    </div> 
    </div> 
</div> 

當我點擊選擇1，所有的鏈接都被刪除，並創建一個文本「你在選擇1單擊」如果我選擇2同樣的情況點擊，但這次顯示「您在選擇2點擊」 。

我有這個javascript，用函數創建一個帶有文本的div和一個刪除鏈接的函數。但我不知道如何去選擇ID並放置相應的文本。

function createDiv() 
{ 
    var element = document.createElement("div"); 
    var main = document.getElementById("main"); 
    main.appendChild(element); 
    var text = document.createTextNode("This is the new text"); 
    element.appendChild(text); 
} 
function removeLink() 
{ 
var link = document.getElementById("links");  
    link.parentNode.removeChild(link); 
} 

我已經搜查了很多在互聯網上，但我沒有發現這樣做的有效途徑。如果有人可以提出如何做到這一點，我會非常感激。

Answer 1

你可以在父容器上設置一個點擊監聽器，它是#links，並檢查你是否點擊其中一個鏈接，如果你這樣做，獲取InnerHTML並替換#links div的innerHTML。

document.getElementById('links').addEventListener('click',function(event){ 
 
    event.preventDefault(); 
 
var target = event.target; 
 
    if (target.nodeName === 'A'){ 
 
     this.innerHTML = 'You clicked on ' + target.innerHTML; 
 
} 
 

 
});

<div id="links"> 
 
<a id="id-1" href="google.com">Option 1</a> 
 
<a id="id-2" href="google.com">Option 2</a> 
 
<a id="id-3" href="google.com">Option 3</a> 
 
</div>

Answer 2

你應該在這個answer使用事件listenners喜歡，因爲它們一般一個更好的做法。但是，如果您仍然需要/需要使用onclick，那麼您可以使用this並將它傳遞給createDiv。所以你的代碼看起來就像這樣：

function createDiv(e) 
 
{ 
 
    var element = document.createElement("div"); 
 
    var main = document.getElementById("main"); 
 
    main.appendChild(element); 
 
    var text = document.createTextNode("you clicked on " + e.innerText); 
 
    element.appendChild(text); 
 
} 
 
function removeLink() 
 
{ 
 
var link = document.getElementById("links");  
 
    link.parentNode.removeChild(link); 
 
}

<div id="main">  
 
    <div> 
 
    <div id="links"> 
 
     <a id="choice1" href="#footer" onclick="createDiv(this);removeLink();">choice1</a> 
 
     <a id="choice2" href="#footer" onclick="createDiv(this);removeLink();">choice2</a> 
 
     <a id="choice3" href="#footer" onclick="createDiv(this);removeLink();">choice3</a> 
 
    </div> 
 
    </div> 
 
</div>

所有on*事件作爲參數傳遞給該事件發生的元素。