Fuji - H2O
Fuji - H2O

Reputation: 387

removing Li if duplicate <a> tag found

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&amp;RC=Inventory">Inventory</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Manufacturing">Manufacturing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Metrics">Metrics</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Operational">Operational</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Planning">Planning</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Procurement">Procurement</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Sales Order">Sales Order</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard">Dashboard</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=International Operations">International Operations</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Purchasing">Purchasing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard&nbsp;‎">Dashboard&nbsp;‎</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Strategic Sourcing">Strategic Sourcing</a></li>
</div>

Upvotes: 1

Views: 69

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle.

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&nbsp;&lrm;, 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&amp;RC=Inventory">Inventory</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Manufacturing">Manufacturing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Metrics">Metrics</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Operational">Operational</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Planning">Planning</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Procurement">Procurement</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Sales Order">Sales Order</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard">Dashboard</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=International Operations">International Operations</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Purchasing">Purchasing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard&nbsp;‎">Dashboard&nbsp;‎</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Strategic Sourcing">Strategic Sourcing</a></li>
</div>

Upvotes: 1

Ankit Awasthi
Ankit Awasthi

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

Related Questions