Error removing child div second time - javascript

I am using prototype 1.6.1 to insert and remove a div as a first child of another div.
So I have parent div 'A'
and I do
$('A').insert(divB,'top');
then later
$('B').remove();
This works fine, but if I create the same div a second time and then try to remove it again I get an error that $('B').parentNode is null. But if I look at $('A').innerHTML it does show the child div 'B' inserted. I am seeing this only on firefox (on IE8 works fine).
Any hints of why this behavior?

If Pointy's guess (multiple elements with the same ID in the document) wasn't correct, please post the example testcase (e.g. to http://www.jsfiddle.net/ or similar).

Related

Chrome returns null when using getElementById() in the console until I inspect an element?

I use CTRL+SHIFT+I to open the JS Console on a page I am working on (not one I am actively developing) in Chrome Version 86.0.4240.111, I immediately start to type document.getElementById('Clear All') and I get back null
But after I click the Elements tab, and inspect the element with the id="Clear All" attribute, running the same function (document.getElementById('Clear All')) returns the element.
Does this have something to do with there being a space in the id attribute? Is there a way to preload the DOM so that I can pull the Clear All element without inspecting the page first?
Additionally of note, this page has <frameset>s and the element I want to access is inside one.
Considering this is a newer product, I really can't believe they use <frameset>s.
Don't use space on ID ... try id="clear-all" on element and on javascript-> document.getElementById("clear-all")

Selenium Webdriver can not locate element by xPath

I am using two different ways to access a web element with Selenium webdriver (JavaScript).
The first way uses a number indicating third div element in the parent div. The code is like this:
driver.findElement(By.xpath("//div[#id='sld-layer-container']/div/div/ul/li[2]/div/div[2]/div/div[3]/select/option[2]")).click();
This code doesn't work. It returns error: ElementNotVisibleError: element not visible: Element is not currently visible and may not be manipulated
The second way uses class to identify the specific div in parent div. Code is like this:
driver.findElement(By.xpath("//div[#id='sld-layer-container']/div/div/ul/li[2]/div/div[2]/div/div[#class = 'col-md-5']/select/option[2]")).click();
As you can see, the only difference is the identifier of last div element in xPath string. They should indicate the same thing. Magically the second one works but not the first one.
Here is a screenshot of css elements. The div highlighted is what I am trying to locate.
Can anyone help me with this?
Update 1:
As #Mahipal and #iamkenos required, I expended the div and now it is showing select and option. I thought the issue was only caused by not being able to locate the div but it seems not. Please help further.
you can try as below:
Select select = new Select (driver.findElement(By.xpath("//div[#id='sld-layer-container']/div/div/ul/li[2]/div/div[2]/div/div[3]/select")));
select.selectByVisibleText("PROJECT_VALUE");
you can try with below xpath as well...
//div[#id='featureClassList']//div[#class='col-md-5']

Remove message, Framework7

I can't seem to remove just one message using the JS framework, Framework7. There is a "myMessages.removeMessage(message);" where message is "HTMLElement or string (with CSS Selector) of message element to remove.". But I cant get this to work on just 1 message. Either all gets removed or none. Ive inspected the elements and they all seem to be the same (see screenshot). Removing all can be done with e.g.
myMessages.removeMessage(".message-first");
Adding e.g. ".message-received" removes all received messages and so on. Cant find anything that separates between the very last message and all others.
Anyone that has any idea how to remove the last message (or a specific message) with Framework7?
Use Dom library from Framework7 (doc), to delete the last element who matched with ".message-first", simply do a $$.find(), take last item and delete it with .delete().

Showing an element with a common ID, hiding others

I'm attempting to create a system that, when one element is selected, shows an element of the same ID whilst hiding the previous without hiding all instances of that ID (i.e. it is only hidden if a certain class is present).
The first part (making an element 'active' and setting the ID variable) works fine, but I can't seem to get the secondary element to stop being set using the '.hidden' class.
The code I'm using for this part is
function showSelect() {
select = $(".active").attr('id');
$(".items").addClass("hidden");
$("#"+select).removeClass("hidden");
}
I've tried using $(select).remove... on the fourth line, as well as what is currently present, but to no avail.
The rest of the code can be found on http://jsfiddle.net/ActualRealJamz/2JZA6/
I'm not sure what I'm doing wrong here, and JSHint reports no syntax error of any kind - so in that there must be an error to my method.
If this happens to be of any use, Chrome reports an 'Unexpected identifier' on the line $(".items").addClass("hidden");.
Any help in this matter is most appreciated.
As Barmar pointed out in the comments, that fundamentally cannot work because you cannot have the same id on more than one element. If you do, the document is invalid and the browser is free to ignore the id values. (In practice, they typically act as though only the first element in the document with a given id value has that id, ignoring subsequent ones.)
You seem to be using the class items on the relevant elements, so it's straight-forward to do what you're looking to do. Assuming showSelect is attached to the relevant elements as a click handler, within showSelect, this will be the specific element that was clicked. So:
// Hooking it up
$(".items").click(showSelect);
// The function
function showSelect() {
$(".items").not(this).addClass("hidden");
$(this).removeClass("hidden");
}
No ids required at all.

Div display based on radio selection

Currently I have a piece of code that works fine as long as there are no other divs in the page. If I add other divs, they will close upon any radio selection. I just need a simple modification to the code to open and close without closing all other divs. The working example can be seen here.
http://jsfiddle.net/L5qfn/38/
I added the "wrapper" to the entire contents of the body to demonstrate how everything closes. Take out the wrapper...and things work like I want it to. Any suggestions?
The problem comes from your <div id="wrapper">, and this line :
$('div[class!="formset"]').slideUp("fast"); //Slide Up Effect
I rather suggest to change it to :
$('div .sub-formset').slideUp("fast"); //Slide Up Effect
See the result : http://jsfiddle.net/L5qfn/40/
The problem is caused by the following line:
$('div[class!="formset"]').slideUp("fast");
That basically says "hide any div which does not have the class formset". The wrapper div does not have that class, so it gets hidden. I'm not sure what that line is doing (it appears to do nothing useful in the fiddle at least) so I'd suggest just removing it, unless you can expand upon your problem.
Here's an updated fiddle.
Update based on comments
As #fflorent has mentioned, it looks like you actually wanted to hide .sub-formset, so you probably want to change that selector to:
$(".sub-formset").slideUp("fast");
Note that I've used a class selector (the . character) rather than using an attribute equals selector as you've done in your fiddle.

Categories

Resources