We Keep Coding

How to remove div with a particular text in it

I have some div tags which has some text & elements in it & I want to remove those div's, They are looks like this
<div style="font-family:verdana;font-size:12px;">
Example
example
</div>
There are many div's like this & I want to remove them all with using jQuery or javascript

If the elements have nothing in common such as a class, you can remove it by using the :contains and remove() method.
$("div:contains('Example')").remove()
Full example shown below:
$("div:contains('Example')").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
Example
</div>
<div>
Darren
</div>
If the elements do have something in common you could use the class selector.
$(".common-class").remove();

Based on Darren's answer, if you want to be extra sure (as :contains will match and delete any div containing the word example), you can make sure it's a div that has an anchor with that same example as children, then go back to the parent and remove it.
If this doesn't work, please paste a few more divs so we can see a common pattern and target it the safest way possible.
$(document).ready(function(){
$('#remove').click(function(e){
$("div:contains('Example')").children("a:contains('example')").parent("div:contains('Example')").remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-family:verdana;font-size:12px;">Example example</div>
<div style="font-family:verdana;font-size:12px;">Don't remove example</div>
<div style="font-family:verdana;font-size:12px;">Example don't remove</div>
<button id="remove">
Remove undesired divs
</button>

Parent of an id using Jquery

<div class="cdlButton" style="width:40px; float: left;"> // want this div element
<div style="">
<a id="changestatus" class="" onclick="changeWorkflowStatus()" href="#">
<img id="" width="32px" height="32px" title="disable" alt="disable" src="images/disable.png">
</a>
</div>
</div>
I want div with help of jquery
Right now i am doing this way
$("#changestatus ").parent().parent().addClass('disablecdlButton');
Is there any other way to get top div element

$('#changestatus').closest('div.cdlButton').addClass('disablecdlButton');
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Official Document

You can do various things here
$(".cdlButton").addClass('disablecdlButton');
$('#changestatus').closest('div.cdlButton').addClass('disablecdlButton');
$($('#changestatus').parents().get(-1)).addClass('disablecdlButton');

use closest()
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
$("#changestatus").closest("div.cdlButton").addClass('disablecdlButton');

You can try
$("#changestatus ").parents(".cdlButton").addClass('disablecdlButton');

$("#changestatus ").parents('div.cdlButton').addClass('disablecdlButton');

DEMO
Try this, .parents('div').last() will select the top most parent div element of the selected element , here it is changestatus
$("#changestatus ").parents('div').last().addClass('disablecdlButton');
Hope this helps,Thank you

jquery custom data attribute not working inside div tag

I am using this div code
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
and trying to print the values like
japp.init = function () {
console.log($("div").data("role"));
console.log($("div").data("lastValue"));
console.log($("div").data("hidden"));
console.log($("div").data("options").name);
});
This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
console prints undefined for above html.
Please let me know if anything is not clear

When getting data jQuery returns data from the first element matching selector, if the first div in DOM has no data - jquery won't return it.
try
japp.init = function () {
console.log($("div[data-role]").data("role"));
console.log($("div[data-lastValue]").data("lastValue"));
console.log($("div[data-hidden]").data("hidden"));
console.log($("div[data-options]").data("options").name);
});
or better give this div an id, and select by id like $('#someid').data('role')

Your selector is div and when you have more divs on your page jQuery will select (in this case) the first one.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
In the above HTML the first div does not have data-* so it will result with an undefined value
You have to be more specific with your selectors
$('.page div').data('role')
Or
$('div:first div').data('role')

Try
$("div.page div").each(function(){
console.log($(this).data("whatever_you_need"));
});
etc.
This way you will cycle through all divs nested in div with class 'page'.

You aren't exactly specifying which div to get. Whenever you are trying to get specific data from a specific element, you should be sure which div you are accessing. This can either occur within an iteration of elements or by ID or an element in relation to an ID. It shouldn't be done based on tagname or even classname as they can be multiple. In this case, why not add an ID on the div you are trying to get so you can access it specifically:
<div class="page">
<div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
Then access:
console.log($("#thisDiv").data("role"));
Also, it is bad for performance to wrap the same jquery object over and over, you can cache it like this:
$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....

I believe it is because $("div") returns all occurrences of div and then selects the first to perform a function on. I'm not sure how you want to use this functionality but it might be worth considering something like this
JSFiddle where a class is used to select the correct div
$(function(){
console.log($(".div").data("role"));
console.log($(".div").data("lastValue"));
console.log($(".div").data("hidden"));
console.log($(".div").data("options").name);
});

give your Div a class like class="myClass"
<div class="page">
<div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
and then you can change your jquery selector:
japp.init = function () {
console.log($(".myClass").data("role"));
console.log($(".myClass").data("lastValue"));
console.log($(".myClass").data("hidden"));
console.log($(".myClass").data("options").name);
});
otherwise jquery don't know which div you are looking for.
I hope this will help

Move existing div to the body of HTML

I want to move an existing div which is inside another one to the body of HTML.
For example i have:
<body><div1><div2>blah</div2></div1></body>
I would like it to make:
<body><div1></div1><div2>blah</div2></body>
Any suggestions?

Give your divs some IDs:
<body>
<div id="one">
<div id="two">
</div>
</div>
</body>
Then use appendTo
$('#two').appendTo('body');

$('div2').appendTo('body');
(you'll have to change div2 to a proper selector of course)

use some combination of remove and append to achieve ur out put.
jQuery Remove Method
jQuery Append Method

run the first div onclick

I have a list of div on a parent function, each does a onclick function.
How can I make a function that I can have a function to get the first div and run the onclick function?
The important thing is, my divs can be sorted. So after being sorted, the "first div" might not be the first anymore, so I need a function to be defined and each time when window is ready I run it once, and after the divs are sorted I run it again.
Thanks!
Edit: OK, say here's my code, I will sort those divs based on the id:
<div id="e">
<div id="e1" onclick="$(this).siblings().removeClass('someclass').addClass('someclass')">Something</div>
<div id="e2" onclick="$(this).siblings().removeClass('someclass').addClass('someclass')">Something</div>
<div id="e3" onclick="$(this).siblings().removeClass('someclass').addClass('someclass')">Something</div>
<div id="e4" onclick="$(this).siblings().removeClass('someclass').addClass('someclass')">Something</div>
<div id="e5" onclick="$(this).siblings().removeClass('someclass').addClass('someclass')">Something</div>
</div>

Use delegate with first selector.
$("divsContainer").delegate("div:first", 'click', function(){
});
Note: Specify the appropriate selector for divsContainer which is actually the contianer in which all these divs are present.

Use jquery to select all the divs on the page (or within any container containting these sortable divs). This will give you an array. Take the first element, and it will be first div.

$('#parent div:first-child').click();

do you mean something like this ?
$('#idOfParentDiv div:first').click();