Remove message, Framework7 - javascript

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().

Related

Cypress - Waiting for an element which has same attributes with other elements already existed

This problem that I'm facing is common for me and I want to learn for about best practices.
My problem is:
I have to wait a text which has an attribute of ".title" class and the text involves the statement of: "Hello". Before triggering this element to come to surface, we have an element already have attributes of ".title" which have a text of "StatementX" as well (At the end of the process, I have 2 ".title" class items on screen).
When I tried to wait for the element "Hello", I write:
`cy.get('.title').contains('Hello').should('be.visible')
`
Since "StatementX" is already on the screen, Cypress finds ".title" class and does not check "contains" part. What is the best practice to handle such cases?
Thank you so much
If you move the class .title into command .contains() it will focus solely on the element you wish to test, i.e two criteria will be tested in one command call and it will find the specific element.
cy.contains('.title', 'Hello').should('be.visible')
If you don't have any difference at all in those elements you will have a return of an array of elements.
In that part .eq(NUMBER OF THE ARRAY) you can validate the option that you want.
Also you can use XPATH for those cases. Not recommended since it's volatile but since is old stuff that is not changed it should have an higher change of stability.

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")

jQuery toggling dynamically generated nested elements

I'm currently designing a webpage presenting a twitter-like user input that generates an <li> (inside a <ul>) element in which are appended one <h6> element (the post's title) and a <p> element underneath (the content).This works, therefore the input and generation of elements is not the problem.
But what I want to do is use jQuery to hide the posts's content, and toggle it when I click on the post's title. The issue is that the event handler seems to work only for every second post. Whenever i post once more, the 1st post on the list can be toggled, the second not, third yes, etc.
From what I've seen in some answers, I've tried the .click() method, the .on() method, I've tried to replace .toggle() with.hide() and .show() under conditionals, then created a class with display:none to toggle on click. This was my last stop, and the result is described in the above paragraph. Here's the event handler:
$('.postinstance').on("click", "h6.postname", function() {
$(this).siblings().toggleClass('postOff');
});
The .siblings() is actually only the post content, but that's the only way I could get near what I wanted. When I replace $(this).siblings() with the actual class of the content element, every post's content toggles when I click on any title.
How can I make each post open individually when I click on it?
Here's a JSFiddle isolating the input & posts part.
I have looked thoroughly in Stack Overflow and other places, even tutorials, to solve this problem but although similar questions were found none of their answers provided a solution.
You should not attach event handlers to dynamically generated elements directly, instead use some common parent element. Here's a piece of your snippet where I changed the selector and everything started working:
$('.postlist').on("click", "h6.postname", function() {
$(this).siblings().toggleClass('postOff');
});
Important note: you must pull this piece of code out from $('.postbtn').click(..) one level up, otherwise for even number of posts toggling will not work!
And move this out of click handler:
$('.postlist').on("click", "h6.postname", function() {
console.log(this);
$(this).siblings().toggleClass('postOff');
});

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.

Error removing child div second time

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).

Categories

Resources