I have this html:
<div>
<div><!-- all div without ID -->
<span>some text</span>
<div>
<span id="listener1">click here</span>
<span>sometext</span></div>
<div>
<span class="FIND_ME">Result Here</span></div>
</div>
<div>
<span>some text</span>
<div id="div1">
<div id="div2">
<span id="listener2">click here</span>
<span>sometext</span></div>
</div>
<div>
<span class="FIND_ME">Result Here</span></div>
</div>
</div>
Should be the following logic: wheen I click on "click here" the element with class "FIND_ME" should hide, which is the nearest common ancestor with the button pressed. Is it possible to do this?
$("#listener1").click(function(){
$(this).<SUPER_SEARCHING>.hide(); // for example hide, or add some CSS class
});
You can find closest div that has element .find_me in it:
$("#listener1").click(function(){
$(this).closest('div:has(.FIND_ME)').find('.FIND_ME').hide();
});
Working Demo
Related
So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.
Here's my code:
HTML
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Jquery
('.button1').mouseover(function(event) {
$(".text").attr('id');
})
With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].
Note few bug fixes:
('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element
$('.button1').mouseover(function(event) {
console.log($(this).find('.Score').attr('id'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
How can I click on a smiley / emoji from a list and place it in a input field? I can see in the Inspect Element Q (console log) that it is being clicked but I can not find a way to copy it to the input field.
HTML
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(event) {
// get selected item and place it in input field
};
You can get the clicked emoticon with event.target and add the textContent of that to the value of the input element.
I also added a check event.target != event.currentTarget to avoid all icons are inserted when you click on the parent but not on a child (emoticon). When your html content of the event handler gets more complicated then you probably want to add a class to all emoticon spans and check if the clicked element has that class.
function smileySelect(event) {
/*
event.target = the actually clicked element
event.currentTarget = the element that has the event handler
When they are not equal we know the click was on a child of the .emoji element.
Any child is valid since you only have the emoticon span elements inside the .emoji element.
*/
if (event.target != event.currentTarget) {
let smiley = event.target;
document.querySelector('#text').value += smiley.textContent;
}
};
<div id="wrapper">
<div class="bubble-container"></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
You can try something like:-
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="smileySelect(event.target.innerHTML)">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes" > 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(emoji) {
if (emoji.includes("span") == false)
document.getElementById("text").value += emoji;
};
fiddle link
I want to append a div in labels as helper text. within each radio group and its wrapper div.
I have a radio buttons group code generated dynamically, so I can't add static helper text to labels using HTML.
I am placing div under radio group div and adding div with helper text and wrapping each radio group with another div, then using append. I am adding its only helper text div to its labels using classes.
before screen before
After screen after
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No</label>
</span>
</div>
</div>
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
<div class="RadioButtonHelperTextLabel2">no helper text</div>
</div>
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText3">Not sure</label>
</span>
</div>
</div>
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
<div class="RadioButtonHelperTextLabel2">no helper text</div>
<div class="RadioButtonHelperTextLabel3">not sure helper text</div>
</div>
I want to Append Yes helper text into Yes using jQuery like this but my script is adding multiple/duplicate divs:
$("div.helperTextWrapper ").each(function(index) {
$(this).find('.RadioButtonHelperTextLabel1').appendTo('.RadioButtonHelperText1');
$(this).find('.RadioButtonHelperTextLabel2').appendTo('.RadioButtonHelperText2');
$(this).find('.RadioButtonHelperTextLabel3').appendTo('.RadioButtonHelperText3');
});
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No
<div class="RadioButtonHelperTextLabel2">no helper text</div>
</label>
</span>
</div>
</div>
</div>
<div class="helperTextWrapper" >
<div class="radioTable">
<div>
<span>
<label class="RadioButtonHelperText1">Yes
<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText2">No
<div class="RadioButtonHelperTextLabel2">no helper text</div>
</label>
</span>
</div>
<div>
<span>
<label class="RadioButtonHelperText3">Not sure
<div class="RadioButtonHelperTextLabel3">not sure helper text</div>
</label>
</span>
</div>
</div>
</div>
````
$("div.radioTable").each(function() {
$(this).parents(".helperTextWrapper").each(function(index) {
$(this).find('.RadioButtonHelperTextLabel1').appendTo('.RadioButtonHelperText1');
$(this).find('.RadioButtonHelperTextLabel2').appendTo('.RadioButtonHelperText2');
$(this).find('.RadioButtonHelperTextLabel3').appendTo('.RadioButtonHelperText3');
});
});
$(".RadioButtonHelperTextLabel1 ").each(function() {
$(this).appendTo('.RadioButtonHelperText1');
});
$(".RadioButtonHelperTextLabel2 ").each(function() {
$(this).appendTo('.RadioButtonHelperText2');
});
$(".RadioButtonHelperTextLabel3 ").each(function() {
$(this).appendTo('.RadioButtonHelperText3');
});
```
This question already has answers here:
How to remove only the parent element and not its child elements in JavaScript?
(13 answers)
Closed 5 years ago.
Could anyone help me on how I can remove div tags without removing their content in JavaScript?
This is my html from which I need to remove all div tags:
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
Expected output would be like shown below.
<p>some text
<label> Test content </label>
</p>
<span>some text</span>
<label> Test content </label>
<a href=https://twitter.com/realDonaldTrump/status/882186896285282304 target=_blank rel=noopener>creepiness</a>
1.Using pure java-script:-
var divs=document.getElementsByTagName('div');
var counter = divs.length-1;
for(i=counter;i>=0;i--){
divs[i].outerHTML = divs[i].innerHTML;
}
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
2.You can use jQuery unwrap() also:-
$(document).ready(function(){
$('div').contents().unwrap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
Using cutting edge technology such as iterable nodelists and replaceWith, it's really straightforward with the plain DOM API:
for (const div of document.querySelectorAll("div"))
// alternatively: Array.from(document.getElementsByTagName("div"))
div.replaceWith(...div.childNodes);
you can use unwrap function.
$('div').children().unwrap();
If you want to do in plain javascript. You can get a list of all divs using document.getElementsByTagName("div"), but you will need to unwrap these divs in reverse order. This is a nodelist so reverse() will not work on it, so you can first use [].slice.call() on it which gives you an array and then you can reverse it. Then in the array unwrap each element.
you can do something like this:
var elements = [].slice.call(document.getElementsByTagName("div"), 0).reverse();
elements.forEach(function(el){
el.outerHTML = el.innerHTML;
});
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
When the like button div is clicked I am trying to get the content from its span. I know I need to use .text() but im having trouble selecting the corresponding span for each div.
$(".like").click(function(event){
event.stopPropagation();
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");
console.log($('.hideThis').text());
});
returns the string in each span. Do I need to use "this" somewhere?
<div class= "postInfo1>
<span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>
<div class= "postInfo2>
<span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>
<div class= "postInfo3">
<span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>
Yes and try this:
$(".like").click(function(event){
event.stopPropagation();
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");
console.log($(this).prev('div').find('.hideThis').text()); //Find the previous div relative to the clicked span and insisde that find hideThis
});
And remember to close your div, qoutes after the classname postInfo1 and remove quotes in the style value style="display:"none";
Demo
Do I need to use "this" somewhere?
Yes, so you can traverse the DOM having this (the clicked element) as the starting point:
$('.like').click(function(event) {
//...
console.log( $(this).prev().find('.hideThis').text() );
});
You need to do it this way -
Demo ------> http://jsfiddle.net/v4mew/
$(".like").click(function(event){
event.stopPropagation();
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");
console.log($(this).prev('div').find('.hideThis').text());
});
Corrected markup -
<div class="postInfo1"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>
<div class="postInfo2"> <span class="hideThis" style="display: none">3453652545</span>
</div>
<div class="like ">Like Button</div>
<div class="postInfo3"> <span class="hideThis" style="display: none">3453652545</span>
</div>
<div class="like ">Like Button</div>
Your markup is all jacked up. You have strings and tags that aren't closed.
I cleaned it up for you
<div class="postInfo1"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>
<div class="postInfo2"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>
<div class="postInfo3"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>