Develop Reference

How to get id of div using jquery?

{"__reactInternalInstance$scd8ef5s9":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":"~","return":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":{"__reactInternalInstance$scd8ef5s9":"~__reactInternalInstance$scd8ef5s9~return","__reactEventHandlers$scd8ef5s9":{"id":0,"style":{"position":"absolute","zIndex":0,"display":"flex","justifyContent":"center","alignItems":"center","width":100,"height":100,"backgroundColor":"white"},"className":"box resizable","children":[{"type":"div","key":null,"ref":null,"props": "props..." ......
console.log(CircularJSON.stringify($(this).find("div")[0]));
Prints it.
Here is the html:
<div
className="myClass"
>
<div
className="resizerClass"
id="tomatoes"
>
<div className="resizers">
</div>
</div>
<div className="resizers"></div>
</div>
I need the id os resizerClass div? how to get it?

If you want to find ID by jQuery as your HTML attributes(className) then you can define attribute in square bracket like $('[className="resizerClass"]') and get other attributes value like attr('id').
$(document).ready(function(){
var getId = $('[className="resizerClass"]').attr('id');
console.log('id='+getId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="myClass">
<div className="resizerClass" id="tomatoes">
<div className="resizers"></div>
</div>
<div className="resizers"></div>
</div>

Remove div having particular name

From the code underneath, I want to remove the previous instances of codemirror, that is both "hello" and "hii" before I can add another instance.
The jQuery is not working.
Also, if I console.log($('#source').hasClass('.CodeMirror.cm-s-default')); it always shows me false, that is it can't find the classnames.
How can I do this?
If this is my html code:
<div class = "source" id="source" name="source">
<div class="result" id="result">
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>
and my javascript, jquery is:
var first = document.getElementById("source").getElementsByClassName("CodeMirror cm-s-default");
var len1 = first.length;
for(var i = 0; i < len1; i++) {
if(first[i].className == "CodeMirror cm-s-default") {
first[i].parentNode.removeChild(first[i]);
}
}

you can do that to remove those elements contain .CodeMirror as a class:
javascript:
document.querySelectorAll(".CodeMirror").forEach(el => el.remove());
<div class="source" id="source" name="source">
<div class="result" id="result">
<div class="test">Not to remove</div>
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>

Maybe simply like this?
$(function() {
$(".CodeMirror").remove();
});

Using jQuery can done like this:
$(".CodeMirror:contains('hello'), .CodeMirror:contains('hii')").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="source" id="source" name="source">
<div class="result" id="result">
<div class="test">Not to remove</div>
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>

if one item is clicked, remove the other items?

I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!

Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>

Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.

You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();

For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>

$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>

Select elements which don't have parent class

$("#result").html($('[contenteditable]').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scorer">
<div>
<div contenteditable>1</div>
<div contenteditable>2</div>
</div>
</div>
<div>
<div contenteditable>3</div>
<div contenteditable>4</div>
</div>
<hr />
<div id="result">
result
</div>
How can I select contenteditable elements which do not have a parent up the chain of "scorer" in CSS or jquery.
Result should be 34.
Thanks!

You can use not() function like this .not('.scorer div')
$("#result").html($('[contenteditable]').not('.scorer div').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scorer">
<div>
<div contenteditable>1</div>
<div contenteditable>2</div>
</div>
</div>
<div>
<div contenteditable>3</div>
<div contenteditable>4</div>
</div>
<hr />
<div id="result">
result
</div>

You can use filter function for this
var result = $("div[contenteditable]").filter(function () {
return $(this).closest(".scorer").length == 0
}).text();
Fiddle

Try not()
$("#result").html($('[contenteditable]').parent().not('.scorer div').text());
FIDDLE

Try to fetch all except for children of scorer:
$('div[contenteditable]').not('.scorer div');

Just to give you a different approach which is the one i find more easier to read
$('.result').html($('div:not(.scorer) [contenteditable]').text());
jsfiddle

How to show some text with clicking id

hi everyone i want to ask you something.
I am trying to make a popup window. My popup window is working fine. But if is possible anyone can tell me How do I withdraw some text in popup window.
For example i have created this DEMO.
You can see in this demo there is a JohDoe1,JohnDoe2,JohnDoe3 and JohnDoe4 and also there is a Click to show name in popup link.
I want to learn how can i withdraw that name (JohDoe1,JohnDoe2,JohnDoe3 and JohnDoe4) when i click (Click to show name in popup) link
Javascript
$(document).ready(function(){
var i;
$('.vd_button').click(function(){
i = $(this).attr('id');
$('.vduzalani, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.vvalan').animate({'opacity':'1.00'}, 300, 'linear');
$('.vduzalani, .vvalan').css('display', 'block');
});
$('.vkapat').click(function(){
close_box();
});
$('.vduzalani').click(function(){
close_box();
});
});
function close_box()
{
$('.vduzalani, .vvalan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.vduzalani, .vvalan').css('display', 'none');
});
}
HTML
<div class="vduzalani"></div>
<div class="vvalan">
<div class="vkapat">✖</div>
<div class="bilgidegistirmealani">
The name should be here
</div>
</div>
<div class="container">
<div class="divcont">
<div class="name" id="5">Jogn Doe1</div>
<div class="show_name vd_button" id="5">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="6">Jogn Doe2</div>
<div class="show_name vd_button" id="6">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="7">Jogn Doe3</div>
<div class="show_name vd_button" id="7">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="8">Jogn Doe4</div>
<div class="show_name vd_button" id="8">Click To show name in popup</div>
</div>
</div>

Essentially, bind a click event to those divs with class names of "show_name". When clicked grab their "prev" sibling's text and use that text to update the dialog's text. With jQuery, that is pretty easy and straight forward:
$('.show_name').click(function () {
var text = $(this).prev().text();
$('.bilgidegistirmealani').text(text);
//open dialog here
});

Here is a sample solution:
$('.show_name').on('click', function() {
var text = $(this).siblings('.name').html()
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vduzalani"></div>
<div class="vvalan">
<div class="vkapat">✖</div>
<div class="bilgidegistirmealani">
The name should be here
</div>
</div>
<div class="container">
<div class="divcont">
<div class="name" id="5">Jogn Doe1</div>
<div class="show_name vd_button" id="5">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="6">Jogn Doe2</div>
<div class="show_name vd_button" id="6">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="7">Jogn Doe3</div>
<div class="show_name vd_button" id="7">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="8">Jogn Doe4</div>
<div class="show_name vd_button" id="8">Click To show name in popup</div>
</div>
</div>