Remove anchor link with text?

JavaScript
1

<a href="javascript://">21005 Huelva, Huelva, España</a>

How can I replace this link with it’s text content?

Like this: 21005 Huelva, Huelva, España

2

This thread should be in the JavaScript forum, not the PHP forum. Do you mind if I move it? You will probably get some very helpful responses there.

3

Would that be only that particular link, or any links with href="javascript://"? I’m asking because that link doesn’t really have any identifying attributes (such as an ID or classes), so otherwise you’d have to get that element via its ancestors or something; we’d need to see more of the markup then.

Anyway, the general approach would look like this:

// Get the link element; we'd probably need a more specific
// selector here.
var link = document.querySelector('a');

// Create a new text node with the text content of the link
var text = document.createTextNode(link.textContent);

// Replace the link with the text node (we can't replace an
// element directly, but by reference to its parent node)
link.parentNode.replaceChild(text, link);
4

That is both invalid HTML - because the link doesn’t go anywhere - and invalid JavaScript (because JavaScript isn’t allowed to be attached to a tag that way as it doesn’t work properly in most browsers . You should never have such code in any web page in the first place as no event is triggered.

5

Is it when the link is clicked that you want to replace the link?

If so, give the the link an identifier so that our JavaScript code can easily access it. A class name seems suitable in this case, for you might have other areas where you want to do the same thing.

Also, set the href attribute so that nothing bad happens when someone with JavaScript disabled attempts to click on it.

<a class="link2text" href="#">21005 Huelva, Huelva, España</a>

With the JavaScript, we will add a click event to each of the links that have the class “link2text”

var links = document.querySelectorAll(".link2text");
Array.prototype.slice.call(links).forEach(function (link) {
    link.addEventListener("click", convertLinkToText, false);
});

For browser compatibility, Array.prototype.slice.call(links) has been used instead.
Thanks @m3g4p0p for the ideas here.

function convertLinkToText() {
    var link = this;
    var text = document.createTextNode(link.textContent);
    link.parentNode.replaceChild(text, link);
}

Putting it all together we end up with:

<ul>
  <li><a class="link2text" href="#">21340 Alájar, España</a></li>
  <li><a class="link2text" href="#">21593 El Almendro, Huelva, España</a></li>
  <li><a class="link2text" href="#">21100 Aljaraque, Huelva, España</a></li>
  <li><a class="link2text" href="#">21110 Aljaraque, Huelva, España</a></li>
  <li><a class="link2text" href="#">21120 Aljaraque, Huelva, España</a></li>
  <li><a class="link2text" href="#">21122 Aljaraque, Huelva, España</a></li>
  <li><a class="link2text" href="#">21005 Huelva, Huelva, España</a></li>
</ul>

function convertLinkToText() {
  var link = this;
  var text = document.createTextNode(link.textContent);
  link.parentNode.replaceChild(text, link);
}
var links = document.querySelectorAll(".link2text");
Array.prototype.slice.call(links).forEach(function (link) {
    link.addEventListener("click", convertLinkToText, false);
});

You can experiment with this code over at https://jsfiddle.net/d7cp9tqp/1/

6

Your JSFiddle is throwing an error

Uncaught TypeError: document.querySelectorAll(…).forEach is not a function

7

Yes, .forEach() only works on arrays, although some browsers (such as chrome) apparently extended it to work on other iterables as well. Anyway, a x-browser solution would be

var links = document.querySelectorAll(".link2text");

Array.prototype.slice.call(links).forEach(/* etc. */);

// Or more concisely with ES6
Array.from(links).forEach(/* etc. */);
8

Ahh, more fool me for being used to the benefit of Chrome. Here’s the update, and will update the post too.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.