How to remove text between <a> with javascript

user_7508547 0
Viewed 386

I am using javascript and jquery to change the text inside of an a tag. I was reading that document.getElementById("yearA").innerHTML = ''; would remove the text but it isn't working. I'm not sure if it's because I am adding text to the a tag then trying to remove it or not. Any help with this would be appreciated. Here is my html

document.getElementById("filter-div").style.visibility = "visible";
document.getElementById("yearA").style.visibility = "visible";
document.getElementById("yearA").innerHTML += 'Remove Link';
console.log('Link added')

function hideYear() {
  document.getElementById("yearA").innerHTML = '';
  console.log('Link removed')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="hiddenTag" />
<div id="filter-div" class="filter-div" style="visibility: hidden;">
  <a id="yearA" onclick="hideYear()" style="visibility: hidden;"></a>
</div>

html jquery javascript
4 Answers

Jquery based solution

you may try:

$('#yearA').text("");
user_28367500

I'm not sure why you are throwing jquery into the mix, but here is a full example with hide and show functions

HTML:

<input type="hidden" id="hiddenTag" />
<div id="filter-div" class="filter-div" style="visibility: hidden;">
    <a id="yearA" onclick="hideYear(event)"></a>
    <div id="showYear" onclick="showYear(event)" style="visibility: hidden;">
        show year
    </div>
</div>

Javascript:

const year = new Date().getYear();
document.getElementById("filter-div").style.visibility = "visible";
document.getElementById("yearA").innerHTML += "Remove " + year;

function hideYear(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    document.getElementById("showYear").style.visibility = "visible";
    document.getElementById("yearA").innerHTML = "";
}

function showYear(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    document.getElementById("showYear").style.visibility = "hidden";
    document.getElementById("yearA").innerHTML = "Remove " + year;
}
user_72714670

Don't make use of innerHTML. That will change the entire html node. If your requirement is just to clear the text within the element, try making use if innerText property. Select the node either via JavaScript or jQuery, update the innerText, that will preserve the href of the anchor tag.

Try making use of innerText.

JavaScript Implementation

function removeText() {
    document.getElementById('google').innerText = '';
}
<a href="http://www.google.com" id="google">Go To Google</a>
<button onclick="removeText()">Remove Text</button>

jQuery Implementation

function removeText() {
    $('#google').text('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<a href="http://www.google.com" id="google">Go To Google</a>
<button onclick="removeText()">Remove Text</button>

user_60993270

Maybe you're looking for something like this? Let me know.

function hideYear() {
  document.getElementById("yearA").innerHTML = '';
}
<input type="hidden" id="hiddenTag" />
<div id="filter-div" class="filter-div">
  <a id="yearA" onclick="hideYear()">test</a>
</div>

user_92012770
Related