Develop Reference

Append does nothing

I'm trying to add an element after removing another:
$("a.III").click( function(e) {
var element = '<div class="tagul" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus"></div>';
e.preventDefault();
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul").fadeIn("slow");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div>
</span>
<span class="content" style="float: right">
</span>
Nothing happens after the older div's fadeOut. I assume I'm doing something wrong while trying to append the new element.

Your code works fine, the problem is most likely that you don't have any content in the divs you're removing/appending, so you can't see that it's working. Here's your exact code but with content in the divs so you can actually see the script working(added an anchor with class of III which I'm assuming you forgot to include in your post):
$("a.III").click( function(e) {
e.preventDefault();
var element = '<div class="tagul2" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus">Tagul 2</div>';
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul2").fadeIn("slow");
});
});
a.III {
display:block;
margin-bottom:20px;
}
.tagul2 {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="III">Click me</a>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew">Tagul</div>
</span>
<span class="content" style="float: right">
</span>
Additionally, your fadeIn() function for the appended element won't actually do anything because the div is set to display by default(essentially you're trying to fade in an element which is already visible). In order to have it fade in, you could change the class of the element you're appending, set the CSS to display:none; and then the element will fade in after being appended(I have made this change in my answer).

check for child element, hide parent if child exists

I have tried this:
<script>
$(document).ready(function() {
$('#title_article:not(:has(>hr:first-child))').hide();
});
</script>
But never shows..
<div id="title_article">
<span style="padding-left:121px;">Article | </span>
<span class="entry-date"><?php echo get_the_date(); ?></span>
</div>
Seeking to check for child element of <hr> if <hr> exists hide parent or #title_article
<hr> would not be within <div id="title_article"></div> but below:
<!-- page content -->
<div id="title_article></div>
<hr>
<!-- page content -->

You are looking for .next()
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.
You have to do something like:
if ($('#title_article').next('hr').length)
$('#title_article').hide();
In your example, <hr> is not a child element of #title_article, but a sibling.

$(document).ready(function() {
if($("#title_article").next("hr").length==0)
$("#title_article").hide()
});
http://fiddle.jshell.net/prollygeek/57gcx6or/3/
Edit:
Use .siblings()

You could use the children function jQuery has to offer.
Try it in this context:
if($('#title_article').children('hr').length > 0) {
$('#title_article').hide();
}
Or this:
if($('#title_article').children('hr').length != 0) {
$('#title_article').hide();
}
You could also use the parent function
Try it in this context:
$('#title_article hr').parent().hide();
This will hide every #title_article that has an hr in it.

jQuery selector only if parent doesn't have attr

Imagine I have this:
<span email="a#test.com" class="parent">
<div class="child"></div>
</span>
<span email="b#test.com" class="parent">
<div class="child"></div>
</span>
How I would I find only the .child elements where the parent span attr email is NOT b#test.com?

Try it:
$('.parent[email!="b#test.com"] .child');
Source.
Regards.

It's simple as this:
$('[email][email!="b#test.com"] > .child')
Explanation:
With this you find all elements with class child which have a parent (>) with email attribute ([email]) and this email attribute is not b#test.com ([email!="b#test.com"]).
Here is the demo

Use this selector:
$(".parent:not([email='b#test.com']) .child")
You can use .each to get each element:
$(".parent:not([email='b#test.com']) .child").each(function(){
var item = $(this); // get the current element
// do something
});

Just use one of those selectors:
.parent:not([email="b#test.com"]) > .child
.parent:not([email=b\#test\.com]) > .child
.parent:not([email="b#test.com"]) > .child {
color: red;
}
<span email="a#test.com" class="parent">
<div class="child">A</div>
</span>
<span email="b#test.com" class="parent">
<div class="child">B</div>
</span>
If you want to get them all with JS, use querySelectorAll:
document.querySelectorAll('.parent:not([email="b#test.com"]) > .child')

$.find("span[email !='b#test.com'] .child");

Replace the same class div and has no ID

I have four DIVS, one is ready and the other three are still hidden. When the link to the second div is pressed, I want the second div to show up, and so for the next link.
The problem is, all the four DIV doesn't have ID and has the same class.
I just want it to automatically run without knowing what is the ID and the class of the div, or anything inside the div. It may look like a slideshow but on click function.
<p> link to the ready div </P>
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>
<div id="wrapper">
<div> this is the div that is ready. This div has no ID and has the same class with others <div>
<div> this is the second div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the third div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the last div that is hidden. This div has no ID and has the same class with others <div>
</div>
FIDDLE

i have made a fiddle that might suite your case please have a look. You can make some modifications according to your needs.
var currentDiv = 0;
$(document).ready(function(){
$(".container div").click(function(){
$(".container div").eq(currentDiv+1).css( "display", "block" );
currentDiv++;
})
});
JSFIddle Link

Im pretty sure this is what you are looking for.
jQuery
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
So what we are doing is getting the index for the link pressed and then using that to select the div we want to show (this is using :nth-child()).
Note: I have put a container around the links so you it doesn't pick up every p on the page.
If you want only one at a time you can just set them all to hide before showing one.
jQuery:
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div").hide();
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here

JS FIDDLE DEMO
Explanation
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2</a>
<a idx="3">3</a>
<a idx="4">4</a>
</div>
$('.buttons a').click(
function(event)
{
var idx = $(event.target).attr('idx');
$('.div').hide(); //Hides all the divs
$('.parentDiv div:nth-child('+idx+')').show(); // Shows required div
}
);
DISADVANTAGE
If you will insert more contents, there is more work. Else no problem..
If you insert a div , you have to change all the links.
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2.0 Inserted Div</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2.0</a>
<a idx="3">2</a>
<a idx="4">3</a>
<a idx="5">4</a>
</div>
Not here , All the idx has to be changed. Since my code uses nth-child property
Edited
Updated Fiddle
Another Update

Need to target item only inside div

Right now I have .clrChart hidden and want to unhide with click on .color but have multiple of these in a row so I need to target the one under the click.
<div class="color">
<a><img src="img/clrBttn.png" alt="" /></a>
<img src="img/clrChart2.jpg" alt="color chart" class="clrChart" />
</div>
I have tried this w/ no avail.
$('.color').click(function() {
$(this).next('.clrChart').show();
});
any help would be greatly appreciated:)

Use .find() instead of .next()

$('.color').click(function() {
$(this).find('.clrChart').show();
});
This will find a descendant inside the current .color