I need to remove div elements which are loaded dynamically between two static div elements.
HTML
<div id="defaultFirst">
</div>
..
..
..
<div id="defaultLast">
</div>
There are some div elements which are loaded in between those two static div elements. Now I need to remove those before I append some other elements.
I tried using $('#defaultFirst').nextAll('div').remove() but that removed the #defaultLast element too.
I know that I can get the ids of the dynamic div and remove. But I need to know if there is any simpler way to remove those dynamic div elements?
Use nextUntil() instead of nextAll() and pass in a selector which selects your #defaultLast element:
$('#defaultFirst').nextUntil('#defaultLast').remove();
.nextUntil( [selector ] [, filter ] )
Description: Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
— jQuery's documentation on nextUntil()
If you have elements which aren't div elements between those two which you aren't wanting to remove, you can specifically remove only div elements by passing in a selector to your remove() call:
$('#defaultFirst').nextUntil('#defaultLast').remove('div');
I would recommend getting to the cause of why the divs are appearing in the first place rather than hacking like this. However if you have to then the following should work
$('#defaultFirst').nextAll('div').not('#defaultLast').remove();
Codepen example - http://codepen.io/webknit/pen/ZeZXdQ
Related
I tring to remove all list items that contain a link But I only remove the child element and don't know how to remove the parent.
document.querySelectorAll('li a[href^="/chennal/robin"').forEach(e => e.remove());
I tried to do it with loops, but it seems I'm just complicating the code for no reason, especially since it doesn't work.
So you need to walk up the DOM tree back up to the li and remove that.
You either need to use parentNode or parentElement if it is one element up. Or closest('li') if it is more than one element up.
e.parentNode.remove();
e.parentElement.remove()
e.closest('li').remove();
I have a couple of same-named divs inside the other div, I would like to select the first div inside the main div and continue selecting data inside it.
So this is what I did:
$('.main > div')[0]
But now I can't $('.another') from inside that selection.
How can I keep on selecting from inside the div I already selected?
First:
Use .first() instead of [0]. .first() is the proper jQuery way to get the first Element of your selection as a jQuery Object.
Second:
Find children of that div using .find(). With .find() you can search inside a jQuery Object for it's descendants using a selector.
$('.main > div').first().find('.another')
should do the job in your case.
I am trying to select a range of anchor elements using nth-child pseudo selector. The problem is that nth-child will work only with child elements, but I have a structure like this:
<div>
<a>first link>
</div>
<div>
<a>Second link</a>
</div>
<div>
<a>Third link</a>
</div>
In this case, the following selector that I found useful for selecting first 2 matched elements doesn't work:
$("a:nth-child(n+1):nth-child(-n+2)")
I created an example here: http://jsfiddle.net/o6w5orom/ , in the first example all the elements are returned instead of first 2. In the second one works but only with direct children.
So, is there a way to construct CSS selector for jQuery that will basically return a range of elements, something like nth-child, but will work on matched elements of a jQuery object ? I want to construct the selector, don't wan't to write logic to process a jQuery object.
Use: $("div:nth-child(n+1):nth-child(-n+2) a")
Select the divs with the nth-child then descend to the a's
Yes, you are right - :nth-child returns only direct children.
But what's the problem? Use find.
$("div:nth-child(n+1):nth-child(-n+2)").find('a')
I have the following code:
var golden_site = '<div id="golden_site"></div>';
$('.form_content').append(golden_site);
var lookup = '<input type="text" name="lookup" value="test">';
Why is this not working:
$(golden_site).append(lookup);
But accessing the node by id works:
$('#golden_site').append(lookup);
This $('#golden_site') selects the div with id=golden_site. While this $(golden_site) doesn't select anything.
Taken from here, you have the following ways of selecting an element using jQuery
Selecting Elements by ID
Selecting Elements by Class Name
Selecting Elements by Attribute
Selecting Elements by Compound CSS Selector
Pseudo-Selectors
The way you tried to select your div doesn't follow one of the above ways. Hence you didn't make it. While using the id you made it, since this is included in the above ways.
update
As Guffa pointed out (I didn't now it) in his comment,
The call $(golden_site) doesn't try to use the string as a selector at
all. It will create an elements from the HTML string, and actually
return that element
The code is working fine, but it doesn't do what you think.
The $(golden_site) part will create a new div element from the HTML code in the string. The lookup element will then be appended to that div. As the div is an element that you just created, it's not in the page and the lookup element that you appended to it isn't in the page either.
If you create the div element first and then append that to the page, instead of using a string in the append, then you have a reference to the div element:
var golden_site = '<div id="golden_site"></div>';
var element = $(golden_site);
$('.form_content').append(element);
Now you can append things to it:
element.append(lookup);
Because when you say
$(golden_site).append(lookup);
Actually you mean:
'<div id="golden_site"></div>'
In plain words, it's just a string, not a jQuery object that can be appended to. golden_site is just a string.
The reason is because the $() is in fact a wrapper of jQuery over the document.querySelector(). So as expected both methods should behave similar, when you do:
$("#blah").append(x);
Indeed the browser is doing this:
document.querySelector("#blah").appendChild(x);
So both methods should work as they explain here -> How query Selector works
As you can see the variable passed as argument is a string that will be used as a CSS Selector, they explain here -> CSS Selector List
I will add this graphic with some of the most common ways to select elements from the DOM, don't forget the '', courtesy from W3CSchools.
I have elements in my page like
<div class="editableTxt" data-model-attr="name" data-model-id="123">some text</div>
Now how do I write a selector in jQuery based on the 2 custom attribute values.
So i want something like select element with data-model-attr="name" data-model-id="123"
I want to get a unique element. So I use the 2 attributes.
USe like this
$("[data-model-attr='name'][data-model-id='123']")
As you specified element and not div, have you simply tried:
$('[data-model-attr="name"][data-model-id="123"]');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/x23BV/
for a div obviously just add div:
$('div[data-model-attr="name"][data-model-id="123"]');
Use:
$('div[data-model-attr="name"][data-model-id="123"]');
$('div[data-model-attr="name"][data-model-id="123"]')
But don't use it, it's very slow, set id or classes to this div.