CODEWITHSUNDEEP
javascriptjquery
Zendiko
Zendiko

Reputation: 53

What's the correct jquery function to remove href surrounding text?

I'm using a CSM platform and plugin to generate a navigation. The plugin is a little clunky and limited on controls so I'm trying to use jQuery to influence some basic style changes.

The problem seems simple enough to solve. I want to remove an unwanted A HREF="" surrounding the text in a specific list-item but my logic isn't working.

I'm using:

$( "li.dropdown-header" ).parent().removeAttr( "href");

To try and remove the anchor link attribute from the below

<ul>
<li><a href="">Item 1</a></li>
<li class="dropdown-header"><a href="">Header Title</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>

Any insight or direction would be appreciated.

Thanks!

Upvotes: 0

Views: 94

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82231

You have wrong selector for targeting anchor element. use correct selector:

$( "li.dropdown-header a").removeAttr( "href");

or for completely removing the anchor element and keeping text within it:

$( "li.dropdown-header a").contents().unwrap();

Upvotes: 1

Sharma Vikram
Sharma Vikram

Reputation: 2470

please check this.

$( ".dropdown-header" ).each(function(){
$(this).prev().find('a').removeAttr("href");
$(this).find('a').removeAttr("href");    
$(this).next().find('a').removeAttr("href");

$(this).next().next().find('a').removeAttr("href");
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

I think what you are trying to do is to remove the anchor element inside the li with class dropdown-header

$("li.dropdown-header a").contents().unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="">Item 1</a></li>
  <li class="dropdown-header"><a href="">Header Title</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
</ul>

Upvotes: 2

Related Questions