Reputation: 387
Removing <li>
if duplicate <a>
tag found (after trimming <a>
for trailing space from url and text).
I am using seen but the duplicate is still showing. It looks like Dashboard is duplicating but the 2nd Dashboard has a trailing space in the link url and title.
var seen = {};
$('.nav-report-category a').each(function() {
var txt = $(this).text();
if (seen[txt]) $(this).closest("li").remove();
else seen[txt] = true;
});
.nav-report-category {
border: none !important;
}
.nav-report-category li {
font-size: 16px;
padding: 10px 0px;
width: 110px;
display: inline-block;
background-color: rgb(74, 137, 220);
color: #fff!important;
margin-right: 5px;
text-align: center;
-moz-border-radius: 9px 9px 0px 0px;
-webkit-border-radius: 9px 9px 0px 0px;
border-radius: 9px 9px 0px 0px;
font-color: #fff!important;
}
.nav-report-category li.active {
background-color: #CB6015!important;
color: #fff!important;
}
.nav-report-category li a:visited {
color: #fff!important;
}
.nav-report-category li a {
color: #fff!important;
}
.nav-report-category li:Hover {
background-color: #BE3A34;
text-decoration: none;
}
.tab-desc {
background-color: rgb(93, 156, 236);
color: #fff !important;
padding: 5px;
}
.tab-desc H2 {
color: #fff !important;
}
#txt-Business-Function {
font-family: "Segoe UI Light", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
color: #BE3A34;
font-size: 22px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-report-category">
<li><a href="https://myanalytix-beta.myexterran.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Inventory">Inventory</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Manufacturing">Manufacturing</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Metrics">Metrics</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Operational">Operational</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Planning">Planning</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Procurement">Procurement</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Sales Order">Sales Order</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Dashboard">Dashboard</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=International Operations">International Operations</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Purchasing">Purchasing</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Dashboard ">Dashboard </a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Strategic Sourcing">Strategic Sourcing</a></li>
</div>
Upvotes: 1
Views: 69
Reputation: 67505
The main problem comes from the HTML entities you've with the text in your anchors, you must remove/replace them when retrieving the text, your second "Dashboard" text is in the fact Dashboard ‎
, so it will never match with Dashboard
as key
.
Remove them from your JS or remove them from you HTML code, e.g :
var txt = $(this).text().replace(/[^A-Z0-9]+/ig, "");
NOTE 1: Use x.hasOwnProperty(y)
to check if an object x
has a property y
, in your case :
if ( seen.hasOwnProperty( txt ) ){
NOTE 2: As @MasterYoda's comment says Your <li>
elements should be children of either <ul>
or <ol>
not <div>
.
var seen = {};
$('.nav-report-category a').each(function() {
var txt = $(this).text().replace(/[^A-Z0-9]+/ig, "");
if (seen.hasOwnProperty(txt)) {
$(this).closest("li").remove();
} else {
seen[txt] = true;
}
});
.nav-report-category {
border: none !important;
}
.nav-report-category li {
font-size: 16px;
padding: 10px 0px;
width: 110px;
display: inline-block;
background-color: rgb(74, 137, 220);
color: #fff!important;
margin-right: 5px;
text-align: center;
-moz-border-radius: 9px 9px 0px 0px;
-webkit-border-radius: 9px 9px 0px 0px;
border-radius: 9px 9px 0px 0px;
font-color: #fff!important;
}
.nav-report-category li.active {
background-color: #CB6015!important;
color: #fff!important;
}
.nav-report-category li a:visited {
color: #fff!important;
}
.nav-report-category li a {
color: #fff!important;
}
.nav-report-category li:Hover {
background-color: #BE3A34;
text-decoration: none;
}
.tab-desc {
background-color: rgb(93, 156, 236);
color: #fff !important;
padding: 5px;
}
.tab-desc H2 {
color: #fff !important;
}
#txt-Business-Function {
font-family: "Segoe UI Light", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
color: #BE3A34;
font-size: 22px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-report-category">
<li><a href="https://myanalytix-beta.myexterran.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Inventory">Inventory</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Manufacturing">Manufacturing</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Metrics">Metrics</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Operational">Operational</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Planning">Planning</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Procurement">Procurement</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Sales Order">Sales Order</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Dashboard">Dashboard</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=International Operations">International Operations</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Purchasing">Purchasing</a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Dashboard ">Dashboard </a></li>
<li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&RC=Strategic Sourcing">Strategic Sourcing</a></li>
</div>
Upvotes: 1
Reputation: 36
var seen = {};
$('.nav-report-category a').each(function() {
var txt1 = decodeURI($(this).text());
var txt = txt1.replace(/[^a-zA-Z ]/g, "");
if (seen[txt]) $(this).closest("li").remove();
else seen[txt] = true;
});
Upvotes: 0