I have a portion of a child HTML file called up inside a div using an id tag in the parent. I want to create a button to clean out the child content and return to the parent inside that div. What would the JS code be for this, for a graphic?
suppose your html is:
<div class='parent'>
<div class='innerParent'>
<input type='button' id='removeChildContent'>
<div class='child'>
</div>
</div>
</div>
so, using jQuery, you can clean the child content as below:
$(function()
{
$('#removeChildContent').click(function()
{
$(this).siblings().not(':first').remove();//removes the child elements of inner parent, except this button
})
})
Related
Say I have the following HTML and I want to hide all the children of the 'overlay' div dynamically
<div id="overlay" class="foo">
<h2 class="title">title</h2>
<h1 id="bar">sub-title</h1>
<button id="reset">reset</button>
</div>
is there a better way to mass hide/unhide these elements than calling .className = 'hide' on them individually?
*note that I want to retrieve those later so looping over them with .remove() or setting div innerHTML to an empty string is not an option
In your css you can create this:
#overlay.hidden-content > * {
visibility: hidden
}
And add hidden-content to your div with overlay id to hide all the child elements.
I have a main document div to add some html element through variable "str"
<div id='documentDiv'></div>
I have a functionality which will add some html element to my #documentDiv.
var str="<div class='customElement'></div><a href='' onclick='append(event);'>append</a>"
And I have a functionality to append str to documentDiv as many time I want:
$('#documentDiv').append(str);
after appending two times I have the same structure appended twice inside my documentDiv element
<div id='documentDiv'>
<div class='customElement'></div><a href='' onclick='append(event);'>append</a> // want to append some text to respective .customElement div
<div class='customElement'></div><a href='' onclick='append(event);'>append</a>
</div>
My problem is with onclick ,i want to append something inside the respective div under customElement class.But with onClick ,it always gets appended to the first div.How can i get respective div element using jquery?
function append(event){
$('.customElement').append("some text");
}
Maybe this could help you:
Without a-tag:
$('.customElement').bind('click',function(){
$(this).append("some text");
});
or with a-tag:
$('.customElement a').bind('click',function(){
$(this).parent().append("some text");
});
I believe you want to use this.
function append(event){
$(this).append("some text");
}
Since you are adding your elements dynamically you should delegate the events by adding the on method to the parent element.
Here is an example.
function append(event){
$(this).prev().append("some text");
event.preventDevault();
}
$('#documentDiv').on('click', 'a', append);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='documentDiv'>
<div class='customElement'></div><a href='#'>append</a>
<div class='customElement'></div><a href='#'>append</a>
</div>
I would like to insert an hr element in a different child div (2 child divs within a parent div), as per the set-up below. The insertbefore method works fine for an element within the same div but not for elements in the other child div (see code below). Is there a different method I can use to achieve this or do I want the impossible?
<body>
<div id="whole section">
<div id="group_a">
<h3 id="event_1">Heading 1</h3>
<p> some text </p>
**// I would like to insert an hr element here**
<h3 id="event_2">Heading 2</h3>
<p> more text </p>
</div>
<div id="group_b">
**// I can only insert code here though**
<script type="text/javascript">
function add_hr(){
var new_hr = document.createElement('hr');
var reference = document.getElementById('event_2');
document.body.insertBefore(new_hr, reference);
}
window.onload = function(){add_hr();};
</script>
</div>
</div>
</body>
insertBefore requires that the reference element be a direct child of the element on which you call it. Your line
document.body.insertBefore(new_hr, reference);
...tells the browser to insert new_hr before the reference element directly contained by document.body. But document.body doesn't directly contain the reference element, it's inside a div. So you get an error, because the reference element can't be found directly inside the element you're inserting into.
You can fix that by using the reference element's parent:
reference.parentNode.insertBefore(new_hr, reference);
Live Example | Source
Here is my problem:
<html>
<div id="parentdiv">
some parent value
<div id="childdiv">some child value</div>
</div>
</html>
parent div --> parent div content --> child div --> child div content --> end child div --> end parent div
I need to acquire only parent div value, without child div value. How can I do that in Javascript?
try this:
alert($('#parentdiv').clone().children().remove().end().text());
If you have control over the HTML - just wrap the value in a <p> tag (as it should be) and then access it like so..
HTML
<html>
<div id="parentdiv">
<p>some parent value</p>
<div id="childdiv">some child value</div>
</div>
</html>
jQuery
$('#parentdiv p').text();
If there are other <p> elements in the parentdiv then use a class.
just wrap it inside a span tag and get the inneHTML of that tag
This works:
var $parent = $('#parentdiv').clone();
$parent.find('#childdiv').remove();
var parentvalue = $parent.text();
Try it in this JsFiddle
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});