what I have
I have a parent div of class = "alphabets" and have child div's all with same class = "word"
<div class="alphabets">
<div class="word"> abc </div>
<div class="word"> def </div>
<div class="word"> ghi </div>
<div class="word"> jkl </div>
<div class="word"> mno </div>
</div>
what I need
when I click on 'abc' it should get deleted, if clicked on 'jkl' it should be deleted, i.e on which text (word) I click it should get deleted.
Help me
use the event.target property to determine which child element was clicked on. Once you know which element was clicked, you can use the remove() method
const alphabets = document.querySelector('.alphabets');
alphabets.addEventListener('click', (event) => {
if (event.target.classList.contains('word')) {
event.target.remove();
}
});
<div class="alphabets">
<div class="word"> abc </div>
<div class="word"> def </div>
<div class="word"> ghi </div>
<div class="word"> jkl </div>
<div class="word"> mno </div>
</div>
Another way is to use a jQuery library which provides an easy way for working with the DOM.
$('.word').click(function(){
$(this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabets">
<div class="word"> abc </div>
<div class="word"> def </div>
<div class="word"> ghi </div>
<div class="word"> jkl </div>
<div class="word"> mno </div>
</div>
Related
I would like to archive the below by using JavaScript (or with jQuery). Here is the HTML structure:
<div class="score-set">
<div class="score-item">A<div id="score">96+</div></div>
<div class="score-item">B<div id="score">99</div></div>
<div class="score-item">C<div id="score">99</div></div>
<div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">86</div></div>
<div class="score-item">B<div id="score">88</div></div>
<div class="score-item">C<div id="score">90</div></div>
<div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
<div class="score-item">B<div id="score">83+</div></div>
<div class="score-item">C<div id="score">76</div></div>
<div class="score-item">D<div id="score">78</div></div>
</div>
The JavaScript will do the modification, and the desired results will be B 99 C90 A 83- , which looks like:
<div class="score-set">
<div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
<div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
</div>
The rules are:
Ignore all non-number in id="score", eg. + and -, and do the ranking.
Show one highest score item.
If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
When writing the result, write the original div item, including + or -.
To be able to do this, it would be best to get each individual score-set and treat one after another.
For each score item, we need to first get the score and transform it (Array#map) into a number with no digits (.replace(\/D+/g, ''))and memorize the score item html object.
Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
We can then sort the remaining ones in descending order and simply take the first one of the list. Can be done with Array#sort and destructuring assignment.
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
Then finally we update the score set html.
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
const scoreSets = document.getElementsByClassName('score-set');
for(const scoreSet of scoreSets){
const [{ scoreItem }] = Array
.from(scoreSet.getElementsByClassName('score-item'), scoreItem => ({
scoreItem,
// it would be better here to access the score using the id
// but `score` is used multiple times which makes getting
// the score element unreliable
score: Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
}))
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
}
<div class="score-set">
<div class="score-item">A
<div id="score">96+</div>
</div>
<div class="score-item">B
<div id="score">99</div>
</div>
<div class="score-item">C
<div id="score">99</div>
</div>
<div class="score-item">D
<div id="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">86</div>
</div>
<div class="score-item">B
<div id="score">88</div>
</div>
<div class="score-item">C
<div id="score">90</div>
</div>
<div class="score-item">D
<div id="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">83-</div>
</div>
<div class="score-item">B
<div id="score">83+</div>
</div>
<div class="score-item">C
<div id="score">76</div>
</div>
<div class="score-item">D
<div id="score">78</div>
</div>
</div>
This can be MUCH simplified
Note I changed the invalid ID to class="score"
If you cannot do that, then change .querySelector(".score") to .querySelector("div")
document.querySelectorAll('.score-set').forEach(scoreSet => {
const scores = [...scoreSet.querySelectorAll(".score-item")];
scores.sort((a,b) => parseInt(b.querySelector(".score").textContent) - parseInt(a.querySelector(".score").textContent))
scoreSet.innerHTML ="";
scoreSet.append(scores[0])
})
<div class="score-set">
<div class="score-item">A
<div class="score">96+</div>
</div>
<div class="score-item">B
<div class="score">99</div>
</div>
<div class="score-item">C
<div class="score">99</div>
</div>
<div class="score-item">D
<div class="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">86</div>
</div>
<div class="score-item">B
<div class="score">88</div>
</div>
<div class="score-item">C
<div class="score">90</div>
</div>
<div class="score-item">D
<div class="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">83-</div>
</div>
<div class="score-item">B
<div class="score">83+</div>
</div>
<div class="score-item">C
<div class="score">76</div>
</div>
<div class="score-item">D
<div class="score">78</div>
</div>
</div>
I have a search result page. Each article there has an image, title, description and tags. I want that each article which has less than 6 tags, to add remove class from a div.
$('.searchTag-container').each(function(){
cat = $('.searchResult__tag',this).children().length;
if (cat < 6) {
console.log(cat);
$(".share").addClass("remove");
}
});
When I do this the remove class adds to all of articles even if it has 6 or more tags.
<div class="row bottom">
<div class="col-md-8">
<div class="searchResults">
<div class="searchTag-container">
<div class="searchResult__tag " data-number="0">
Tag1
</div>
<div class="searchResult__tag" data-number="1">
Tag2
</div>
<div class="searchResult__tag" data-number="2">
Tag3
</div>
<div class="searchResult__tag" data-number="3">
Tag4
</div>
<div class="searchResult__tag" data-number="4">
Tag5
</div>
<div class="searchResult__tag" data-number="5">
Tag6
</div>
</div>
</div>
</div>
<div class="col-md-4 share">
<div class="social">
<a class="btn-facebook"><img src="""></a>
<a class="btn-twitter"><img src=""></a>
<a class="btn-linkedin"><img src="""></a>
</div>
</div>
Your code is working ok, but the mistake is you are looping through .searchTag-container, which will iterate only once and you are checking .searchResult__tag's length,
so in .searchTag-container there are 6 .searchResult__tag and each one has one children, so it gives length of all .searchResult__tag's children combined so it becomes 6, and so variable cat = 6 and it gives false when you check cat < 6.
So for solving it, you have to iterate through loop of each .searchResult__tag and check it's children length as i have done,
check below for working solution of your problem:
$(function(){
$('.searchTag-container .searchResult__tag').each(function(){
cat = $(this).children().length;
if (cat < 6) {
console.log(cat);
$(".share").addClass("remove");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bottom">
<div class="col-md-8">
<div class="searchResults">
<div class="searchTag-container">
<div class="searchResult__tag " data-number="0">
Tag1
</div>
<div class="searchResult__tag" data-number="1">
Tag2
</div>
<div class="searchResult__tag" data-number="2">
Tag3
</div>
<div class="searchResult__tag" data-number="3">
Tag4
</div>
<div class="searchResult__tag" data-number="4">
Tag5
</div>
<div class="searchResult__tag" data-number="5">
Tag6
</div>
</div>
</div>
</div>
<div class="col-md-4 share">
<div class="social">
<a class="btn-facebook"><img src=""></a>
<a class="btn-twitter"><img src=""></a>
<a class="btn-linkedin"><img src="""></a>
</div>
</div>
you can try below script:
$('.searchTag-container').each(function(){
cat = parseInt($('.searchResult__tag',this).children().length);
if (cat < 6) {
$(this).closest(".row").children(".share").addClass("remove");
console.log(cat);
}
});
check this fiddle
Hope this will help you.
To select the Children with a specific class I would use $(this).children('.searchResult__tag') and get the length of that by .length as you did before
I have a scenario where I have
<div id="test">
<div class = "demo1">
<p> Demo 1 Title </p>
<h4> This is Demo1 </h4>
</div>
<div class = "demo2">
<p> Demo 1 Title </p>
<h4> This is Demo2 </h4>
</div>
<div class = "demo3">
<p> Demo 1 Title </p>
<h4> This is Demo3 </h4>
</div>
<div class = "demo4">
<p> Demo 1 Title </p>
<h4> This is Demo4 </h4>
</div>
</div>
Now I want to hide the classes demo1 and demo4, i.e. I want to apply display:none to them.
How can that be done. Please suggest.
They have classes so you can target them.
#test .demo1,
#test .demo4 {
display: none;
}
<div id="test">
<div class = "demo1">
<h4> This is Demo1 </h4>
</div>
<div class = "demo2">
<h4> This is Demo2 </h4>
</div>
<div class = "demo3">
<h4> This is Demo3 </h4>
</div>
<div class = "demo4">
<h4> This is Demo4 </h4>
</div>
</div>
Just try,
$('.demo1, demo4').hide();
Hope this helps!
It will do the work
$(".demo1, .demo4").css("display", "none");
I has example code html
<div class="new">
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
</div>
updated: I want when click to class icon in wrapper first toggle class list first . And class list second not change. Many thanks
$('.icon').click(function(){
$(this).next('.content').toggle('slow')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new">
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
</div>
Use .next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Or .siblings()
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
i have this code :
what i need is target the first div.General with using the child div.myyyy-classs , of course without using any ID
<div class="General">
<div class="">hello</div>
<div class="">hello</div>
<div class="">hello</div>
</div>
<div class="myyyy-classs">hello</div>
<div class="General">
<div class="none">hello</div>
<div class="none">hello</div>
<div class="none">hello</div>
<div class="none">hello</div>
</div>
what i done is
$("#Template1").click(function(){
$(".myyyy-classs").closest(".General").html("Its woking")
});
Update:
After your update you will use .sibling() for that.
$("#Template1").click(function(){
$(".myyyy-classs").siblings(".General").html("Its woking")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='Template1'>Click Me</span>
<div class="General">
<div class="">hello</div>
<div class="">hello</div>
<div class="">hello</div>
</div>
<div class="myyyy-classs">hello</div>
<div class="General">
<div class="none">hello</div>
<div class="none">hello</div>
<div class="none">hello</div>
<div class="none">hello</div>
</div>
Update 2
The above one will select both .General.Secondly, if you want to select previous .General use .prev('.General') or/and for next you can use .next('.General').
Further .prevAll() and .nextAll() are the functions to select all the previous elements of match element or next elements relatively.
Seems like the .General is not a parent div but rather a sibling, so use this:
$(".myyyy-classs").siblings(".General");
Please note that this will return all the siblings as an array, so if you want only the first one use this:
$(".myyyy-classs").siblings(".General").get(0);