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>

How to close alert message div using javascript?

How to close alert message parent div using javascript?
Problem is parent div is closing but i need to close above parent div.
Here is my code:
$(".msg-error .btn-close").click(function(){$(this).parent().hide();});
.msg-error {
background:#ff0000;
color:#fff;
padding:10px;
margin-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mainalert">
<div class="msg-error">
<div class"container">
First error message <a class="btn-close">Close</a>
</div>
</div>
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close">Close</a>
</div>
</div>
</div>

You can use .closest() to specify the closest parent you want to achieve by using a selector.
$(".msg-error .btn-close").click(function() {
$(this).closest('.msg-error').hide();
});
With this function you can even change your HTML structure without having to edit your JavaScript code to deal with multiple level of .parent() calls, provided that you continue using the same CSS class for the selector.
FIDDLE: http://jsfiddle.net/8b7zt1g7/5/

$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});
http://jsfiddle.net/8b7zt1g7/4/
Or, little fancier:
$(".msg-error .btn-close").click(function(){$(this).closest('.msg-error').hide();});

You can chain .parent() calls together. Try:
$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});

you can try this way, by searching for that main parent div
you can use closest() or parents(), first option will return first match and seconds will return all matches, your choice
$(".msg-error .btn-close").click(function() {
$(this).parents(".msg-error").hide();
});
or going the parent twice
$(".msg-error .btn-close").click(function() {
$(this).parent().parent().hide();
});

Remove parent div without jquery
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close" onclick='Close()'>Close</a>
</div>
</div>
<script>
function Close(){
document.getElementsByClassName('msg-error').innerHtml='';
}
<script>

Trying to traverse the DOM so unique video will play when certain div is clicked

So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.
I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.
Here is an example of what I have now (there are many of these, dynamically added):
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:
$(".thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest(".window").removeClass("hide").addClass("show");
$(this).closest(".video").removeClass("hide").addClass("show");
});
CSS is very basic:
.hide { display: none; }
.show { display: block; }
Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!

Depending on what you actually want your classes to be, I'd use this code:
$(".thumbnail").on("click", function () {
var $block = $(this).closest(".block");
$block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});
DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)
It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.
If you actually want to include . in your attributes, you need to escape them for jQuery selection.
As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.

You have a huge issue with your class names in HTML:
<div class=".block">
it should be
<div class="block">
Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"
So fix it all to this and you should find more success:
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>

Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:
$(".\\.thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest("\\.window").removeClass("hide").addClass("show");
$(this).closest("\\.video").removeClass("hide").addClass("show");
});
Otherwise just try removing the periods from the classes...
Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...
You should change your code to:
$(".\\.thumbnail").on("click",function(){
$(this).next("\\.window").children(".video")
.addBack().add("#modal").removeClass("hide").addClass("show");
});

CSS Negate: Displaying specific elements in a hidden Element?

Assume we have an element that is similar to this
<div id="navigation">
<div class="nav-block-1">....</div>
<div class="nav-block-2">....</div>
This is the offer
Report
</div>
Now I want to hide all the elements including the textelements but not the nav-block-2, so is there a way through which I can do this? Something like using CSS negation?
I tried using
#navigation :not(.nav-block-2) {
display:none;
}
but this seems to negating even the elements inside nav-block-2? Am I doing something wrong here? Any ideas?

Maybe not what you want but here's what i'd do.
#navigation * {
display:none;
}
#navigation a {
display:inline;
}
EDIT:
As it says in the comments in your question, I think it's difficult to do a :not when there's no tag around the text.

Try this
#navigation div:not(.nav-block-2) {
display:none;
}
<div id="navigation">
<div class="nav-block-1">Div 1</div>
<div class="nav-block-2">Div 2</div>
This is the offer
Report
</div>

Use this:
#navigation > *:not(.nav-block-2) {
display:none;
}
However, you can't hide single text nodes. You will need to put the "This is the offer" in a paragraph or at least in a <span> tag to hide it, or you would need to hide the whole #navigation which inevitable contains the .nav-block-2.

.slideToggle class individually based on .click

Basically trying to write something like this. Click .button and it .slideToggle(s) it's associated .box Div. Nesting them inside a container div to try different methods.
I feel stupid, this has been asked many times. I've tried at least a dozen none of which I can get to work.
Code is here.
http://jsfiddle.net/BurRQ/25/
<div class="container">
<div class="header">
TOGGLE
</div>
<div class="box">
<p>Content</p>
</div>
</div>​
Cheers.

You need to use the .parent method to move back into your header before trying to use .next.
http://jsfiddle.net/BurRQ/26/
Before
$('.toggle').click(function(){
$(this).next('.box').slideToggle("slow");
}); // .click
After
$('.toggle').click(function(){
$(this).parent().next('.box').slideToggle("slow");
}); // .click

There are many ways to do this, here are three (since I can give them a name)
The family method: $(this).parent().siblings('.box').slideToggle();
The closest find method: $(this).closest('.container').find('.box').slideToggle();
The next parent method: $(this).parent().next().slideToggle();