Develop Reference

Content filter using button with jquery still doesn't work?

hello I want to ask about javascript. I created a content filter feature using a button. First, I want to display the default content 'all'. When I click on the 'tech' category, the content all disappears and only shows 'tech' content. When I click on the 'education' category, the tech content disappears and only displays 'education' content.
I have made the code as below, but it's still not what I want. the problem is, when I click on a category, the old value still appears and each category only displays 1 content.
how do i make the filter I want with jquery or pure JS?
$(document).ready(function(){
$('button').on("click" , function(){
let target = $(this).data('target');
let content = $('.list-content').data('content');
console.log(target);
$('#' + target).show();
});
});
.list-content{
display:none;
}
.list-content .show{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-tag">
<button data-target="all">All</button>
<button data-target="tech">Tech</button>
<button data-target="industry">Industry</button>
<button data-target="edu">Education</button>
</div>
<div class="content">
<div class="list-content" id="all">Lorem ipsum All.</div>
<div class="list-content" id="all">Lorem ipsum All.</div>
<div class="list-content" id="all">Lorem ipsum All.</div>
<div class="list-content" id="all">Lorem ipsum All.</div>
<div class="list-content" id="tech">Lorem ipsum Tech.</div>
<div class="list-content" id="tech">Lorem ipsum Tech.</div>
<div class="list-content" id="tech">Lorem ipsum Tech.</div>
<div class="list-content" id="tech">Lorem ipsum Tech.</div>
<div class="list-content" id="industry">Lorem ipsum Industry.</div>
<div class="list-content" id="industry">Lorem ipsum Industry.</div>
<div class="list-content" id="industry">Lorem ipsum Industry.</div>
<div class="list-content" id="industry">Lorem ipsum Industry.</div>
<div class="list-content" id="edu">Lorem ipsum Edu.</div>
<div class="list-content" id="edu">Lorem ipsum Edu.</div>
<div class="list-content" id="edu">Lorem ipsum Edu.</div>
<div class="list-content" id="edu">Lorem ipsum Edu.</div>
</div>

Id should be unique throughout the page.
Hide all the lists first to remove old ones.
$(document).ready(function(){
$('.all').show();
$('button').on("click" , function(){
let target = $(this).data('target');
let content = $('.list-content').data('content');
console.log(target);
$('.list-content').hide(); // You should hide all the contents before showing the filtered ones.
$('.' + target).show();
});
});
.list-content{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-tag">
<button data-target="all">All</button>
<button data-target="tech">Tech</button>
<button data-target="industry">Industry</button>
<button data-target="edu">Education</button>
</div>
<div class="content">
<div class="list-content all">Lorem ipsum All.</div>
<div class="list-content all">Lorem ipsum All.</div>
<div class="list-content all">Lorem ipsum All.</div>
<div class="list-content all">Lorem ipsum All.</div>
<div class="list-content tech">Lorem ipsum Tech.</div>
<div class="list-content tech">Lorem ipsum Tech.</div>
<div class="list-content tech">Lorem ipsum Tech.</div>
<div class="list-content tech">Lorem ipsum Tech.</div>
<div class="list-content industry">Lorem ipsum Industry.</div>
<div class="list-content industry">Lorem ipsum Industry.</div>
<div class="list-content industry">Lorem ipsum Industry.</div>
<div class="list-content industry">Lorem ipsum Industry.</div>
<div class="list-content edu">Lorem ipsum Edu.</div>
<div class="list-content edu">Lorem ipsum Edu.</div>
<div class="list-content edu">Lorem ipsum Edu.</div>
<div class="list-content edu">Lorem ipsum Edu.</div>
</div>

DOM get image src on click anywhere in div

I am able to get the image source when I click on the image...
document
.querySelectorAll('.module img')
.forEach(el => el.addEventListener("click", e => {
console.log(e.target.currentSrc)
});
<div class="module">
<img src="pics/pic1.jpg">
<h2>Title</h2>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic2.jpg">
<h2>Title</h2>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic3.jpg">
<h2>Title</h2>
<p>Lorem impsum dolor sit amet</p>
</div>
...but how can I get the image source no matter where I click in the parent div, without doing event listeners for each child element?

You can do something like this.Add a listener to the whole div with class selector.
document.querySelectorAll(".module").forEach(ele => {
ele.addEventListener("click", function() {
console.log(this.children[0].getAttribute('src'))
})
})
<div class="module">
<img src="pics/pic.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>

Whatever your solution, it sounds like you will need to get info from either this, or the event passed into the event listener:
document
.querySelectorAll('.module')
.forEach(el => {
el.addEventListener("click", e => {
console.log(e.currentTarget.querySelector('img').currentSrc);
});
});
<div class="module">
<img src="pics/pic.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic2.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>
<div class="module">
<img src="pics/pic3.jpg">
<h2>Title</h2>
<p class="usp">Lorem ipsum</p>
<p>Lorem impsum dolor sit amet</p>
</div>

Add an event listener to the parent, and do not use event.stopPropagation()
var el = document.querySelector(".module");
el.addEventListener("click", function(ev){
// Parent div clicked, get the image element ref
var img = document.querySelector(".module img");
alert(img.currentSrc)
// Image src alerted
})

How to hide specific json object data using jquery

I use a PHP file to parse json data as DIV objects, and below is the example of the results (in HTML)
// hidethis.js
$('.hidden').click(function() {
$('.agee').hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Data A</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age A</button>
</div>
<div class="row">
<h2>Data B</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age B</button>
</div>
<div class="row">
<h2>Data C</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age C</button>
</div>
</div>
Preview: https://jsfiddle.net/xj71kqgb/
My problem is when I clicked any "Hide" button, all p.agee are automatically hidden.
The result I'm trying to achieve, when the "Hide Age A" button is clicked, only the p.agee from Data A will be hidden.
And also if possible, without needed to touch the JS script when new data is being added. Is it possible to achieve this?
Thanks.

Yes your code will hide all elements with class .agee.
You must change your code to this:
$('.hidden').click(function() {
$(this).closest("div.row").find(".agee").hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Data A</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age A</button>
</div>
<div class="row">
<h2>Data B</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age B</button>
</div>
<div class="row">
<h2>Data C</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age C</button>
</div>
</div>
when you clicked on .hidden class. first must find closest div.row tag (parent div) then on this div you must find .agee and hide it.

You can use toggle function if you want show page again onclick
$('.hidden').click(function() {
$(this).closest('.row').find('.agee').toggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Data A</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age A</button>
</div>
<div class="row">
<h2>Data B</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age B</button>
</div>
<div class="row">
<h2>Data C</h2>
<p class="agee">Lorem ipsum dolor sit amet</p>
<button type="button" class="hidden">Hide Age C</button>
</div>
</div>

event bubbling and 'this' weirdness

Apologies for not originally having a reproducible test case - I have now made one on CodePen:-
https://codepen.io/cssgrid/pen/971328c046d97ffd24decafa20804d3b/
I have a bunch of products. I want to remove the product from the DOM whenever someone clicks a remove button which is inside each product div.
My problem is: the last product in the list is being removed rather than the product with the button in it that the user actually clicked :(
<div class="product">
//some code
<button class="remove-btn">Remove</button>
</div><!-- end of product div -->
var products = document.querySelectorAll(".product");
for (let i = 0; i < products.length; i++) {
products[i].addEventListener("click", function(e) {
if (e.target.classList.contains("remove-btn")) {
this.remove();
}
})
}
Also tried in jQuery:
$(".remove-btn").on("click", function() {
$(this).closest(".product").remove();
})

Actually your code works just fine on further inspection. But I have included a simpler and more cleaner version of it below.
As you don't mind using jquery,
$('.remove-btn').click(function() {
$(this).parent('.product').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Lorem Ipsum 1</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 2</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 3</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 4</p>
<button class="remove-btn">Remove</button>
</div>
<div class="product">
<p>Lorem Ipsum 5</p>
<button class="remove-btn">Remove</button>
</div>

jQuery : toggle class opening all class

I have following code and I have gone through many SO question but still I am not able to make it run.
I want to use toggle but problem is that It is opening all the class related to this.What I want is to toggle only class that is clicked.
I have tried e.preventDefault , e.stopPropagation(); and return false.But none of them worked for me.
NOTE I don't know the use of above mentioned three.I have used them at the end not at the beginning.
$(".read").click(function(e){
//e.preventDefault();
$(".expand").toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

Problem that $(".expand") returns all elements that has class .expand, but you need get only one element. You can do it like this
$(".read").click(function(e){
$(this).next('.expand').toggle();
return false;
});
Demo: http://jsbin.com/marale/1/edit?html,js,output

$(".read").click(function(e){
//e.preventDefault();
$(this).next(".expand").toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

you can use
$(".read").click(function(e){
//e.preventDefault();
$(".read").next(".expand").toggle();
return false;
});

Please check the following code:
$(".read").click(function(e){
//e.preventDefault();
$(this).next('.expand').toggle();
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

Try something like this. Here next() simply grabs the next element and $(this) referrs to the one currently clicked on.
$(".read").click(function(e){
//e.preventDefault();
$(this).next().toggleClass('expand');
return false;
});
.expand{display:none;background:#000;color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>