Develop Reference

Hide content in <div> using .html() without hiding inner <div>

I have the following HTML code, generated by C#:
<div class="more-news-items" id="#id">
<p>Content goes here</p>
<div style="text-align:center">
<button class="newsfeed-hide">TOON MINDER</button>
<button class="newsfeed-more">TOON MEER</button>
</div>
</div>
I want to hide the
<p>Content goes here</p>
using the following Javascript code, but I want to keep the buttons still in the div. How would I achieve this, and if it is not possible, how can I do this?
$(document).ready(function () {
div.find('.newsfeed-hide').click(function () {
$('.more-news-items').html('');
});
});

Try
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items').children('p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});

try:
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
This will hide a p's that are siblings of the parent that the button is in.
But other posts are right in as much as if you want to hide all p's in div's with the class .more-news-items you can select this using $('.more-news-items p') instead. Depending on the exact situation you are using this code in (i.e. if you will have more than one area and only want all p's in all areas removed, or only the ones local to the button.
EDIT:
Remove the $('.more-news-items').html(''); also, this will remove all html inside the .more-news-items div, which you do not want to do here.
Here is the live example: http://jsfiddle.net/lee_gladding/dujc66qd/

Toggle spans inside an <a>

I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?

Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO

here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});

Remove only one div with query

Here is the JsFiddle
I have a button that will add a new header, textbox, and a link when it's click.
But when I click on the remove link. It's removes every new item that was added.
Html:
<div id='main'>
Top of Boby
<div id='main_1'>
<div>
<h3> Item</h3>
<input type="text" />
</div>
</div>
</div>
JS:
$(function() {
$('.AddItem').click(function() {
$('div#main_1').append("<div><h3>Item</h3><input type='text' class='remove_skill'/><a href=''>Remove</a</div>");
});
})
$(function() {
$('.remove_skill').click(function() {
$(this).remove();
});
})

2 issues..
You have never defined the class for the anchor. Add the class to the anchor
You need to remove the enclosing div and not the anchor. Use .closest
Also you need to delegate the event as the elements are being added dynamically
$('#main').on('click', '.remove_skill', function (e) {
e.preventDefault();
$(this).closest('div').remove();
});
Check Fiddle

The problem with the code you've posted is that no links exist at the moment you call $('.remove_skill').click, so you can't add event listeners to them.
I recommend a step-by-step approach. Create, add behaviour, append to the document.
$('.AddItem').click(function () {
var new_element = $('<div class="item"><h3>Item</h3><input type="text"/><a class="remove" href="#">Remove</a></div>');
new_element.find(".remove").click(remove_item);
$('div#main_1').append(new_element);
});
function remove_item() {
$(this).closest(".item").remove();
return false;
}
I recommend <a href="#"> for javascript-handled links.
Alternative solution using a closure:
$('.AddItem').click(function () {
var new_element = $("<div class="item"><h3>Item</h3><input type='text'/><a class="remove" href="#">Remove</a</div>");
new_element.find(".remove").click(function() {
new_element.remove();
});
$('div#main_1').append(new_element);
});

Your problem is that your "Remove" is in an 'a' tag. This causes the page to reload, and removing all of your previous changes.

How can I manipulate dynamically created elements wth jquery?

I am a jquery newbie and i am creating boxes with jquery and then "deleting" them. But I want to use the same code to delete the box in the scope of the created element and the scope of a already created element.
Html:
<button id="create">Cria</button>
<div id="main">
<div class="box">
<a class="del-btn" href="#">Delete</a>
</div>
</div>
JS:
var box = {
create: function() {
var box = $('<div class="box">');
var delBtn = $('<a class="del-btn" href="#">Delete</a>');
box.appendTo('#main');
delBtn.appendTo(box);
},
destroy: function(elem) {
elem.fadeOut();
}
}
function deleteBox () {
}
$(function() {
$('#create').click(function() {
box.create();
});
$('.del-btn').click(function() {
var elem = $(this).parent();
box.destroy(elem);
return false;
});
});
If I put the delete event inside the create click event, I just can delete the dynamically created element. If I put it outside, then I can just delete the element in the HTML. I know this is a simple question, but I can't figure out how to solve it. Thanks

You can use delegated-events approach:
$("#main").on("click", ".del-btn", function() {
var elem = $(this).parent();
box.destroy(elem);
return false;
});

How to show/hide the same blocks inside similar blocks with JQuery

Code as follows:
<div class="mama">
<div class="son">Item 1</div>
</div>
<div class="mama">
<div class="son">Item 2</div>
</div>
$(".mama").hover(
function() {
$(".son").show();
},
function() {
$(".son").hide();
}
);
Forward to help. Thanks!

If you're asking how to only hide the ".son" blocks inside each ".mama" block, then it'd be something like this:
$('.mama').each(function() {
var mama = $(this);
mama.hover(
function() { mama.find('.son').show(); },
function() { mama.find('.son').hide(); }
);
});

if all you're doing is showing or hiding content, you don't need jQuery. CSS already has this functionality
.mama .son {
display:none;
}
.mama:hover .son {
display:block;
}

Use the hover() event and just scope your actions to the relevant elements:
$("div.mama").hover(function() {
$(this).find("div.son").show();
}, function() {
$(this).find("div.son").hide();
});
There are many variations on how you can limit this to only children of the affected element.