We Keep Coding

Remove repeated after 1st occurrence

I'm trying to clean up the results presented on my HTML file with Jquery. I want to keep removing words that are repeated more than one time.
A quick example
Accents Australian
Accents English (RP)
Dance Hip Hop
Dance Jazz
It should be output as
Accents
Australian
English (RP)
Dance
Hip Hop
Jazz
My original HTML looks like this
<div role="list" class="skill-items">
<div role="listitem" class="skill-item">
<div class="skill-category">Accents</div>
<div>Australian</div>
</div>
<div role="listitem" class="skill-item">
<div class="skill-category">Accents</div>
<div>English (RP)</div>
</div>
<div role="listitem" class="skill-item">
<div class="skill-category">Dance</div>
<div>Hip Hop</div>
</div>
<div role="listitem" class="skill-item">
<div class="skill-category">Dance</div>
<div>Jaz</div>
</div>
</div>
I tried my best but I'm not landing in a good place
$('.skill-category').text(function(index, oldText) {
return oldText.replace($(this).parent().next().find('.skill-category').text(), '');
})
Any suggestion?

Please check below working code:
const category = [...document.querySelectorAll('.skill-item > .skill-category')];
const texts = new Set(category.map(x => x.innerHTML));
category.forEach(category => {
if(texts.has(category.innerHTML)){
texts.delete(category.innerHTML);
}
else{
category.remove()
}
})
As per you question and shared HTML above is the working code for the same and if you add more similar things it will help.
Please let me know if you find any issues

Your question can be broken into two problems:
You want to group the elements with the same value for .skill-category
You want to change <div> elements into a list.
Grouping the elements could by done like so:
For every category, take a look at the previous element.
Does it contain the same category? If not, then continue to the next category.
If so, take everything after .skill-category (in your example HTML, that's a single <div>. Cut-and-paste it at the end of the aforementioned previous element.
For the second problem:
Changing an element (<div> to <li>) is not possible. You can create a new <li> and move what's inside the <div> into it. Of course, you'll need a <ul> that wraps the <li>s as well.
Take the .skill-category elements
Find all the content that follows the category (in your case, 1+ <div> elements)
Put the contents of the matched elements into a new <li>.
Put all the <li>s of a single category into a <ul>.
Remove the matched elements (in your case, the <div>(s)) since we've moved all their content to a different node. They're now empty tags and useless.
Put the <ul> after the .skill-category.
// Grouping the results.
$('.skill-category').each(function() {
// Get the previous .skill-item and find the category.
var prev = $(this).parent().prev('.skill-item').find('.skill-category');
// Check if the previous category === this category.
var same = !!(prev.length && prev.text() === $(this).text());
if (!same) {
return; // Do nothing.
}
// Take every element after the category and move it to the
// previous .skill-item.
prev.after($(this).nextAll());
// Then remove the now-empty category.
// All content has been moved to the previous element, after all.
$(this).parent().remove();
});
// Wrapping the contents of a category in a list.
$('.skill-category').each(function() {
var list = $('<ul></ul');
// Find everything after the category.
$(this).nextAll().each(function() {
// Create a <li> and move the child elements to it.
// Then add the <li> to the <ul>.
$('<li></li>').append($(this).contents()).appendTo(list);
}).remove(); // remove the now empty elements.
// Add the list to current .skill-category.
$(this).append(list);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div role="list" class="skill-items">
<div role="listitem" class="skill-item">
<div class="skill-category">Accents</div>
<div>Australian</div>
</div>
<div role="listitem" class="skill-item">
<div class="skill-category">Accents</div>
<div>English (RP)</div>
</div>
<div role="listitem" class="skill-item">
<div class="skill-category">Dance</div>
<div>Hip Hop</div>
</div>
<div role="listitem" class="skill-item">
<div class="skill-category">Dance</div>
<div>Jaz</div>
</div>
</div>

How to search more complex list items in pure Javascript

At the moment, I am trying to make a search field for a project using javascript and for some reason my search code is not working. I attribute this to the complexity of the list items, to this point, what would be the proper Javascript code to search the H3 tags in the list below:
<ul class="results" list-style: none>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 2</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 3</h3>
</div>
</div>
</li>
</ul>

There must be better definition of: "I attribute this to the complexity of the list items, to this point, what would be the proper Javascript code to search the H3 tags in the list below:"
Most basic search:
document.querySelectorAll('h3'); // -> returning a nodelist with all the h3 elements in the dom
If you need to add more "complexity" then just change the selector in ('selector')
Otherwise please edit your question to be more precise what you want, like an example output.
UPDATE:
So if I understood correctly what you meant then a very very general example to just demonstrate what i guessing you mean
const getH3 = document.querySelectorAll('ul.results h3'); // here we get all the h3 inside the ul
// let us assume that in our "seach box" the term was '2' for example
const term = '2';
// what to do now? Since we got all our h3 already inside a const we can just go through all of them to check if the term is there, like for example with a forEach
// also creating here an array to push in all the matches
let matches = [];
getH3.forEach(h3 => {
if (h3.textContent.includes(term)) matches.push(h3); // here we push in if our search term was found inside the textContent of an h3 using the string method "includes"
// ofc you can also directly just push the found textContent or also both .-.
});
console.log(matches); // output: [h3]
console.log(matches[0].textContent); // output: a list item 2
UPDATE 2
so this should then answer general questions on this topic:
here the code with comments:
// for simplicity i will stick with the example from before with my 2 since its a pretty simple term :)
// so we doing the same things as before but with some modification
const getH3 = document.querySelectorAll('ul.results h3'); // keep in mind that this script should be executed
// after the dom loaded, otherwise getH3 will be [] empty
// getting our input field which i added to the html with the id
const search = document.getElementById('search'); // here the same with the loading
// so now we have several ways to make our "searching" for probably all ways we need some event
// this could be everytime we type something or when we click on a button etc.
// we will use the "input" or "change" event
// so adding the Eventlistener, could be achieved in two ways, i will use the addEventListener method
search.addEventListener('input', () => {
// everytime there is an input in the input element this function will be called
// since you dont need to work with the element, we dont need to save what we found, we will just make them the only ones left on the screen
// this can be achieved (in my opinion!) with giving or removing a class which makes them disappear or appear
// so we added a small css class with display:none
// now again we go through all h3
// so now it gets a bit weird since we used the h3, i will explain the other way underneath
getH3.forEach(h3 => {
if (h3.textContent.includes(search.value)) { // if the h3 should be displayed
h3.parentElement.parentElement.parentElement.classList.remove('invis') // dom traversing to the li element which holds the h3 to remove the class in case it was there
} else { // if the h3 shouldnt be displayed
h3.parentElement.parentElement.parentElement.classList.add('invis') // adding the class to the li so it disappear
}
});
/*
alternative we could also go through all the li or just use document.querySelector('ul.results>li')
to get all the li
like:
const getLi = document.querySelectorAll('ul.results>li');
getLi.forEach(li =>{
...
})
*/
})
in html added on top the ul:
<input id="search" type="text"> <!-- search box -->
And in css the class:
.invis {
display: none;
}
and here a example snippet you can run yourself to see how it works now:
const getH3 = document.querySelectorAll('ul.results h3');
const search = document.getElementById('search');
search.addEventListener('input', () => {
getH3.forEach(h3 => {
if (h3.textContent.includes(search.value)) h3.parentElement.parentElement.parentElement.classList.remove('invis');
else h3.parentElement.parentElement.parentElement.classList.add('invis');
});
})
.invis {
display: none;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Searching</title>
</head>
<body>
<input id="search" type="text"> <!-- search box -->
<ul class="results" list-style: none>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 2</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 3</h3>
</div>
</div>
</li>
</ul>
</body>
</html>

MDC Web: mdc-select update hidden input value on change (non-native select box) | JavaScript (JS)

Been doing well so far with MDC Web Components, but I've been hung up here for far too long. (Not strong in JS.)
mdc-select used to be non-native, then used native HTML select, and now once again it's non-native. For a while MDC Web supported a hidden input so that you could pass values to the server.
There's hardly any documentation - mostly just stuck users like me opening issues on GitHub:
Closed: MDC Select - no longer form input compatible #2221
Closed: [MDC Select] Example in README does send values to the web server #5295
Open: [MDCSelect] Add hidden input element to support HTML forms #5428
I need to set/update the value of a hidden input on MDCSelect change for multiple select boxes on the same page... I can get it to do it for ONE select box, but not multiple.
Here is the select box HTML:
<div class="mdc-select mdc-select--outlined region-select">
<div class="mdc-select__anchor demo-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="demo-selected-text" class="mdc-select__selected-text" tabindex="0" aria-disabled="false" aria-expanded="false"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch" style="">
<label id="outlined-label" class="mdc-floating-label" style="">Region</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
<ul class="mdc-list">
<li data-value="" disabled="" aria-selected="false" role="option" class="mdc-list-item" tabindex="0"></li>
<li data-value="north" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">North</li>
<li data-value="east" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">East</li>
<li data-value="south" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">South</li>
<li data-value="west" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">West</li>
</ul>
</div>
<!-- THIS IS THE HIDDEN INPUT THANK YOU -->
<input type="hidden" id="name2" name="input_name2" value="" class="my_mdc-select__value" />
</div>
I've tried targeting the hidden input with id, name, and even class. I think I need some sort of integrated function, forEach, or loop - tried adding JS beneath each select with no avail. I've worked the examples (seen below) from other users and no success. JavaScript isn't my thing, I know what it supposed to be happening but don't know the function or loop syntax etc to make this work.
I need to make sure each set/update targets the correct hidden input associated with that particular select box.
Here is my JS that works for ONE select box but not multiple:
// Select Menu
import {MDCSelect} from '#material/select';
const selectElements = [].slice.call(document.querySelectorAll('.mdc-select'));
selectElements.forEach((selectEl) => {
const select = new MDCSelect(selectEl);
select.listen('MDCSelect:change', (el) => {
const elText = el.target.querySelector(`[data-value="${select.value}"]`).innerText;
console.log(`Selected option at index ${select.selectedIndex} with value "${select.value}" with a label of ${elText}`);
// this works but only saves one
document.querySelector('input.my_mdc-select__value').value = select.value;
});
});
Here is some code that others used that I haven't been able to modify/apply (taken from links above):
From nikolov-tmw:
document.querySelectorAll( '[data-mdc-auto-init="MDCSelect"]' ).forEach( function( sel ) {
sel.My_MDCSelect__Value = sel.querySelector('input.my_mdc-select__value');
if ( null !== sel.My_MDCSelect__Value ) {
sel.addEventListener( 'MDCSelect:change', function( a ) {
if ( sel.MDCSelect ) {
sel.My_MDCSelect__Value.value = sel.MDCSelect.value;
}
} );
}
} );
From daniel-dm:
<div class="mdc-select">
...
</div>
<input id="pet-select" type="hidden" name="pets">
<script>
const input = document.querySelector('#pet-select');
const select = document.querySelector('.mdc-select');
select.addEventListener('MDCSelect:change', e => {
input.value = e.detail.value;
});
</script>
Please help! This particular issue has been open since January (people struggling long before) with no clear solution to help non-JS developers implement MDCSelect boxes. Thanks in advance!

The problem is here:
document.querySelector('input.my_mdc-select__value').value = select.value;
Document.querySelector will find the first matching element in the whole document, so in your loop you're always accessing the same input element.
Instead, you should run querySelector method on the parent element of each hidden input, which in your loop will look like:
selectEl.querySelector('input.my_mdc-select__value').value = select.value;

How can I make a jQuery function iterate over separate arrays taken from 2 lists in the same class?

Very sorry if the title is confusing, I'm very new to Javascript/jQuery and I don't really have the terminology down yet. I'm in charge of a gaming group and trying to keep track of how many points each member racks up. For simplicity, I'm just using two lists for now, one for Suzy's points and one for Billy's points.
I currently have a function that adds up the points (it takes any bolded text that's contained in an HTML list item and sums the values) and returns the total sum in a designated div under each list. The problem is that it's returning the sum of ALL the points (in both lists), instead of the points for that individual person.
$(".person").each(function() {
var arr = [];
$("li b").each(function() {
arr.push($(this).text());
})
var total = 0;
for (var i = 0; i < arr.length; i++) {
total += arr[i] << 0;
}
$(".total").text("Total: " + total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="member">
<div class="points">
<ul class="person" id="suzy">
<h1>Suzy</h1>
<li><b>40</b> points</li>
<li><b>50</b> points</li>
</ul>
</div>
<div class="total" style="background:orange"></div>
</div>
<div class="member">
<div class="points">
<ul class="person" id="billy">
<h1>Billy</h1>
<li><b>10</b> points</li>
<li><b>20</b> points</li>
</ul>
</div>
<div class="total" style="background:orange"></div>
</div>
I understand what's going wrong with the code, I just don't know enough about jQuery to figure out what I need to replace it with. Basically, how do I make it so that the array created from $("li b") in the third line is limited to the instances of "li b" that occur within the particular ".person" element specified in the first line?

You need to use $(this) to refer to the .person you're looping over. So for example, instead of $("li b").each use $(this).find("li b").each. Same logic for the placement of the total calculation:
$(".person").each(function() {
var arr = [];
$(this).find("li b").each(function() {
arr.push($(this).text());
})
var total = 0;
for (var i = 0; i < arr.length; i++) {
total += arr[i] << 0;
}
$(this).closest('.member').find(".total").text("Total: " + total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="member">
<div class="points">
<ul class="person" id="suzy">
<h1>Suzy</h1>
<li><b>40</b> points</li>
<li><b>50</b> points</li>
</ul>
</div>
<div class="total" style="background:orange"></div>
</div>
<div class="member">
<div class="points">
<ul class="person" id="billy">
<h1>Billy</h1>
<li><b>10</b> points</li>
<li><b>20</b> points</li>
</ul>
</div>
<div class="total" style="background:orange"></div>
</div>

Your getting the same number in both spots because $(".total") has 2 matches.
Also, there is no need for an array here. It just makes the code more complicated and it doesn't make any sense to store a second copy of the data - now you have to make sure that the array data stays in sync with the HTML data. Instead, just get the data from the HTML.
Now, you've got some HTML validation issues:
An h1 isn't allowed inside of a ul.
The b element shouldn't be used solely for styling.
So, you're going to have to adjust your HTML. And, if you swap the closing points div and the total div, the solution gets a little easier. See the comments below for details:
$(".person").each(function(){
var total = 0;
// Loop over only the points for the current person, not all the points
// The second argument passed to JQuery provides context for where to
// limit the first argument query. "this" refers to the current person
// that the loop is iterating over, so you only are adding up one person's
// points, not both.
$("span.points", this).each(function(){
// No JQuery needed here. Just convert the text of "this", which now (because
// we are in a different loop) points to the span that we're looping over,
// to a number and add it to the total
total += +this.textContent;
});
// No JQuery needed here either. Just set the text of the next sibling of
// the person we were looping over (now the total div) to the total.
this.nextElementSibling.textContent = "Total: " + total;
});
/* Do styling with CSS classes rather than inline styles */
li span.points { font-weight:bold; }
.total {background:orange; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="member">
<div class="points">
<h1>Suzy</h1>
<ul class="person">
<li><span class="points">40</span> points</li>
<li><span class="points">50</span> points</li>
</ul>
<div class="total"></div>
</div>
</div>
<div class="member">
<div class="points">
<h1>Billy</h1>
<ul class="person">
<li><span class="points">10</span> points</li>
<li><span class="points">20</span> points</li>
</ul>
<div class="total"></div>
</div>
</div>

jQuery slideUp while sibling div slideDown

I need to make sure only one of the .togglecontent divs show up at once, so when one slides down the other should slide up.
Here is what I have so far
(function($) {
$(document).ready(function() {
$('.toggler h3').click(function() {
var currentContent = $(this).siblings('.togglecontent');
$('.togglecontent').not(currentContent).slideUp();
currentContent.slideToggle();
});
});
})(jQuery);
<div class="toggler-wrap">
<div class="toggler">
<h3><span class="fa fa-angle-double-right"></span> What I offer employees</h3>
<div class="togglecontent">
I have extensive experience litigating a full range of employment claims:
<ul>
<li>discrimination, harassment, retaliation, and wrongful termination</li>
<li>claims involving disability, religious, and pregnancy accommodations</li>
<li>California’s complex leave laws</li>
<li>the California Fair Employment and Housing Act (FEHA)</li>
<li>the California Family Rights Act (CFRA)</li>
<li>the Pregnancy Disability Leave Law (PDLL)</li>
<li>Title VII</li>
<li>the Family and Medical Leave Act (FMLA)</li>
<li>the Americans with Disabilities Act (ADA)</li>
<li>invasion of privacy claims under California law</li>
</ul>
</div>
</div>
<div class="toggler">
<h3><span class="fa fa-angle-double-right"></span> Consulting services for business</h3>
<div class="togglecontent">
For your business, prevention is the key to successful employment practices. I have years of experience helping businesses comply with federal and California employment laws, as well as those in other states.
<ul>
<li>I counsel business on a wide range of policies:
<ul>
<li>leaves of absence
<li>disability accommodation
<li>hiring and dismissal decisions
<li>performance management, policies and handbooks, and
<li>background checks.
</ul>
<li>I’ve conducted nearly 100 workplace training sessions on a wide range of subjects.
<li>If a problem arises, I can give you an independent evaluation.
<li>I’ve also conducted hundreds of workplace investigations.
</ul>
</div>
</div>
</div>
Here is a demo http://jsfiddle.net/4ae6afmj/

You can do something like this
$('.toggler h3').click(function() {
var currentContent = $(this).siblings('.togglecontent');
$('.togglecontent').not(currentContent).slideUp(); // <--- slide up all other .togglecontent except the current one
currentContent.slideToggle();
});
Here is a demo http://jsfiddle.net/dhirajbodicherla/4ae6afmj/3/

use can use .not()
(function($) {
$(document).ready(function() {
$('.toggler h3').click(function() {
$('.togglecontent').not($(this).closest('.toggler').find(' .togglecontent')).slideUp(0);
$(this).closest('.toggler').find('.togglecontent').slideToggle();
});
});
})(jQuery);
DEMO
and you can use
(function($) {
$(document).ready(function() {
$('.toggler h3').click(function() {
var thisContent = $(this).closest('.toggler').find(' .togglecontent');
$('.togglecontent').not(thisContent).slideUp(0);
thisContent.slideToggle();
});
});
})(jQuery);
DEMO

Check this DEMO : http://jsfiddle.net/4ae6afmj/5/
JQUERY
(function ($) {
$(document).ready(function () {
$('.toggler h3').click(function () {
$('.togglecontent').slideUp();
if($(this).siblings('div').css('display') === 'none')
$(this).siblings('div').slideDown();
else
$(this).siblings('div').slideUp();
});
});
})(jQuery);