How to remove all elements in a div after a certain div - javascript

So I have a div that is drawing in dynamic elements at its bottom and I want to hide these elements, no matter what their IDs are using javaScript/jQuery. Basically my HTML looks like this:
<div class="right-panel">
<div class="info">Text</div>
<form id="the-form">
<input type="hidden" name="first-name" value="">
<input type="hidden" name="last-name" value="">
<input type="hidden" name="state" value="">
</form>
<script>javaScript</script>
<div id="dynamic-id-1">Advertisement 1</div>
<div id="dynamic-id-2">Advertisement 2</div>
</div>
I'd like to ensure that the "dynamic-id-1" and "dynamic-id-2" divs are always removed or hidden no matter what their ID's are (their IDs are subject to change). How do I target these elements without targeting their IDs?
Edit--I tried this, but my approach seems limited, and I couldn't get it to work with multiple divs, even when chaining:
$('#the-form').next().hide();
(Note: unfortunately they don't have a class, there are multiple divs, and the IDs are always completely different. I was hoping there might be novel way to target the last two divs of the wrapping div and hide them)

If the script tag is always before the div's that need removing you could do this -
$('.right-panel > script').nextAll('div').remove();
http://jsfiddle.net/w6d8K/1/
Based on what you tried you could do this -
$('#the-form').nextAll('div').hide();
http://jsfiddle.net/w6d8K/2/
Here are the docs for nextAll() - https://api.jquery.com/nextAll/

The simplest route would be to add classes to the dynamic elements. Something like:
<div class="removable-element" id="dynamic-id-1">Advertisement 1</div>
Then, you can do something like:
$(".right-panel .removable-element").remove()

If only one div at a time is generated dynamically. Add this to dynamic generation:
$('#the-form + div').hide();
Another method to achieve the same (not preferred) is:
$('#the-form').next('div').remove();

You are saying you don't want to target their "id", but is there some specific part in the id that will remain the same ?
like for instance "dynamic-id-" ?
If this is the case you can target them by using a "like selector". The code below would target all divs whose ID is starting with "dynamic-id"
$('div[id^=dynamic-id]').each(function () {
//do something here
});

Target the class instead of the dynamic ID.
<div class="element-to-remove" id="dynamic-id-1" />
<div class="element-to-remove" id="dynamic-id-2" />
$('.right-panel . element-to-remove').remove();

Related

Get id of previous select tag

I have next structure:
<div class="input_fields_wrap">
<div class="row">
<select id="house-1-room-1"><?php echo $options; ?></select>
<input type='text' class='name' name='house-1-room-size-1' placeholder='Room Size'>
</div>
</div>
<button class="add_field_button">Add Another Room</button>
When add_field_button clicked, I am trying to get the id of previous select tag, in my case it is house-1-room-1 with jquery (or vanila js).
I've tried:
$(this).parent().prev("select").attr('id');
and
$(this).prev("div").closest("select").attr('id');
And many other combination of above to no avail.
Please help!
Use:
$(this).prev("div").find("select").attr('id');
.closest() goes up in the DOM hierarchy, find() searches down the hierarchy.
Need to use find():
$(this).prev("div").find("select").attr('id');
The .closest() is the opposite, goes from bottom to top. While .find() will go from the current place inside the hierarchy.
find the previous element and find the select tag within that
$(this).prev().find('select').attr('id')
this should work
here is a fiddle https://jsfiddle.net/fxabnk4o/3/

Extract body element without a particular child

Is there a way to extract body element without a particular child element in it?
For example, if I have:
<body>
<div id="id1" class="class1" />
<div id="id2" class="class2" />
</body>
, what I need to be extracted is:
<body>
<div id="id1" class="class1" />
</body>
Actually, I intend to use html2canvas library to make canvas element from a HTML code, but I don't want to include all body children in a canvas element.
If you retrieve a parent element then you also have to take all of its children too. A possible workaround in this case would be to select the body, clone it and then remove the unwanted child element, something like this:
var $bodyClone = $('body').clone();
$bodyClone.find('#id2').remove();
// use $bodyClone as needed here...
$('body').not("#id2").html();
or
$('body').not(".class2").html();
and this is for multiple
$( "div" ).not( ".someclass, #someid,.class").html()
hope it will help
you can use document.getElementById(id) to get one element
or getElementsByClassName(class) and then filter the returned array
Using better ids or classes could help you to avoid filtering at all, simply give all your canvases one class and replace them all.

Get closest parent with stated attribute?

I have the following code :
<input pid="hidVoteKey" type="hidden" value="0" />
<ul id="mainPostList" class="verticalList">
#foreach (var postViewModel in Model.Posts)
{
<li><div class="voteCon">...</div></li>
}
</ul>
Then I have a jquery that loop all elements with class voteCon and then try to get the parent input like this :
$(".voteCon").each(function () {
InitVoteControl($(this), $(this).parent("input[pid='hidVoteKey']").val());
});
The problem is that it will not find the hiddenfield?
In this case the voteCon contains up/down buttons and there is some javascript functions bound here to make ajax calls. There will be multiple lists like the one above on the same page but thay all will have diffrent hidVoteKey.
It won't find the <input> because it isn't a parent (or ancestor) of the <div class="voteCon">. It's on the same level as (a sibling of) the <ul>, which is an ancestor of the <div>. You could do this:
$(this).closest('ul').prev('input[pid="hidVoteKey"]').val()
Just use then not type hidden , you can use inline style="display:none;"

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});
Try this:
$('.table input:checkbox').not('div.checker input').uniform()

Is it possible to append to a div with a given attribute?

How do you append to a specific div with a specified attribute?
ex.
<div attribute="234"></div>
$('#divwithattribute234').append('test');
jQuery('div[attribute=234]').html('test');
Check on jsfiddle
I strongly recommend reading this post about using custom attributes because that wouldn't be valid even in HTML5 which will allow custom attributes. Why not simply use a class since you can have as many as you want ?
<div class"some_class some_other_class target_class"></div>
Of all the above classes, assuming 'target_class' is the one used for identifying the <div>, you would select it and append to it with
$(".target_class").html('test');
Update:
If you have more than one target <div>s and you're looking for a specific one, use a wildcard selector on the trigger (in our case we'll use the ^= operator which means 'starts with') and then assign its ID to a variable which we then pass to the <div> selector. Say you want to add your text to a div when a link is clicked ...
HTML
Add to DIV 1<br />
Add to DIV 2<br />
Add to DIV 3<br />
<div class="some_other_class target_1">Div 1</div>
<div class="some_other_class target_1">Div 2</div>
<div class="some_other_class target_1">Div 3</div>
jQuery
$("a[id^=target_div_]").click(function(event) {
var targetID = $(this).attr('id').substr(11);
$("div.target_" + targetID).html('content got inserted in div ' + targetID);
event.preventDefault();
});
See it on JSFiddle.
Hope this helps !
This is how you will match your div (<div attribute="234"></div>):
$("div[attribute=234]").html('Lets write something...');

Categories