I have a HTML file in the below format :-
<div class="container">
<div class="hello"><p>1</p></div>
<div class="goodbye">2</div>
<div class="hello"><p>3</p></div>
<div class="goodbye">4</div>
</div>
Please recommend me a program which could remove a particular div tag by its class name and save the output file as below :-
<div class="container">
<div class="goodbye">2</div>
<div class="goodbye">4</div>
</div>
The whole division along with its internal tags should be removed. I have used jQuery, but it does not affect the source code.
Thanks in advance.
You can use .remove():
Remove the set of matched elements from the DOM.
$('.container .hello').remove();
Side note: You can use .find() to speed up above selector:
$('.container').find('.hello').remove();
You can get the element having class hello within container and call .remove()
Live Demo
$('.container .hello').remove();
Similar to .empty(), the .remove() method takes elements out of the
DOM. Use .remove() when you want to remove the element itself, as well
as everything inside it. In addition to the elements themselves, all
bound events and jQuery data associated with the elements are removed.
To remove the elements without removing data and events, use .detach(), jQuery docs
So, nobody actually seemed to read what OP asked for.
Here's an answer for a JavaScript Regular Expression, very dirty and unflexible, but matching your needs.
<div class=.(\w*)?.><(.*)</div>
Still you may run into problems, because I don't know any editor actually using JavaScript RegEx.
Basically, everything about problems you might run into has been already said in this famous thread: RegEx match open tags except XHTML self-contained tags
Related
I understand that unlike class, an ID should be unique in a HTML document. What will happen if I use the same id multiple times for multiple HTML elements? Will it throw any error? or will it just not work?
I tried to try this scenario but wanted to know more context around it.
It would be invalid HTML.
In some environments, it may produce a console warning that multiple IDs in a single document is invalid. Harmless, but annoying.
It will prevent document.getElementById from working properly for those elements, because getElementById selects by ID, but there should only be one element with a given ID in the document. Similarly, it may prevent querySelector and querySelectorAll with ID selectors from working properly.
Using the same ID multiple times may well not break your application in most cases, but just because it might be doable in some circumstances doesn't mean it's a good idea. There's no reason to do it, so don't.
Yes, Unlike html class, We cannot apply same id in multiple html elements, It will not throw any error but only the first element with the id will work and other elements won't work.
$('#foo').on('click',function(){
alert('work')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">Click me</div>
$('#foo').on('click',function(){
alert(' work')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">Click me(work)</div>
<div id="foo">Click me(won't work)</div>
<div id="foo">Click me(won't work)</div>
I have tried it and it works if we put same id name for multiple elements its going to change properties where the id is same
Nothing really happens. JavaScript and CSS selectors will only select the first element they find with the id. It's not like your website will crash. It's just very bad practice because an id should be unique on each page.
Is there any way to prevent me from clicking on an anchor to take me to the top of the page?
this is my code:
<div class="slider">
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
1
2
3
4
5
A) If I understood you well, you can do it with pure CSS.
a[href*="#slide"] {
pointer-events: none;
}
B) After reading what you wrote in the comments, you can use what PHPglue suggested.
document.querySelectorAll('a[href*="#slide"]')
.forEach($a => $a.onclick = e => {
e.preventDefault() // don't go
console.log('but do your things')
})
Hope this help :)
As far i know you cannot avoid it its connected to the fact that when you get to page its need to be rendered.
Before that, this id just do not exist.
So no way to remove it.
You can only try to speed this up a bit.
Just try to ensure that your page is loading fast.
You have your syntax confused, but it's easy to understand how that happened... You can do internal page links that will allow you to jump from one spot (or section) to another inside the same page, or even to a specific paragraph inside another page. The problem with your sample code is that you are using HTML syntax to link to CSS.
<div id="slide-1">1</div>
...
1
It's true that you use a # (hash tag) in your <a> tag. So, using 1 should, theoretically, work. And yes, you can use an id of the same name to identify where the link should take you. However - you can not use the name for anything else on the page. It must be unique and specific to avoid any confusion. Since your <div> tag(s) have the same identifier as your anchor tags, and since you are using the CSS selector id, the browser is ignoring your <div id= statement because it cannot find the #slide-1 style in your CSS file.
The easiest way to fix this is to change your code to:
<div id="css_style" name="slide-1">1</div>
...
1
Doing so will allow the <div> to retain the intended styles and connect the link to the anchor on the page. Just don't give your CSS style the same name, use something else.
W3C Links Documentation
When using element directives I have seen Angular element directives used in two ways:
1. As block level components
The element is styled as display:block, is the component and its children are the component's children, so the element itself is the component.
Use of directive:
<example class="Example"></example>
The directive's html:
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
2. As an inline wrapper of the component
The element is left as display:inline and effectively acts as an invisible wrapper for the component itself:
Use of directive:
<example></example>
The directive's html:
<div class="Example">
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
</div>
Obviously each have advantages and disadvantages for example extra markup, loss of layout context due to inline element etc, but is one the correct way? or is this another of Angular's vagaries?
I'm surprised no one responded, but the idea behind creating custom directives is the ability to create reusable pieces of code that fulfill a specific bit of functionality on your site.
This functionality, however, doesn't care about the styles that you are going to use. You can of course conditionally change classes and styles from within Angular, but the core component when dealing with the framework is the data.
With that being said, there is no "correct way" as you bolded in your question. Develop the directive to fit your needs and style of your site.
First this is probably opinion based but i'd really like to share my point of view about this.
If you really follow angular way of doing directives none of theses are a correct way.
Directives are intended to add a behavior to an HTML element.
The less the directive add HTML the best it is as it allow you to have a better control on this element.
Lets take an exemple.
We have a data grid (let say ui-grid, it doesn't really matter)
<ui-grid ...>
...
</ui-grid>
I had a the idea to add some button to add or remove element in the grid.
I first came up with this
<ui-grid ...>
...
</ui-grid>
<button ng-click="addItem()">Add</button>
<button ng-click="removeItem()">Remove</button>
I'm really happy with this and that's ok, but finally i need to use theses buttons in some other views. I'll have to duplicate the HTML, duplicate the JS and adapt it to the collection.
The common mistake
That's obviously not a good idea.
Instead i will do a directive. Lets say "button-list" : it produce the same html and behavior.
<ui-grid ...>
...
</ui-grid>
<button-list></button-list>
That's pretty cool.
Now i have some need. On one view i need the add button to be blue, on an other one i don't need to have a remove button, and on a last one i want the button text to be "X" and "+" (That's was some request by a client in a true story).
I could make a big object with a list of option and etc... but this is really painful and you need to touch the directive each time you need to add a custom different little behavior.
The good way to go
Now lets just think again about what i wanted to do.
I want the button to interact with the grid... and that's pretty much all. This is how we should go building a custom directive.
We could then produce this directive this way :
<div grid-button-container collection="mycollection">
<ui-grid ...>
...
</ui-grid>
<button grid-add-item>Add</button>
<button grid-remove-item>Remove</button>
</div>
So what do we have here ? We have three different directives.
grid-button-container : Its responsibility is to hold the list for the sub-directives.
grid-add-item : It add a function on click that add an element to the collection of grid-button-container.
grid-remove-item : It add a function on click that remove an element to the collection of grid-button-container.
Both grid-add-item and grid-remove-item will be requiring the grid-button-container to be used.
I cannot describe all the implementation of this (it would take too long) but i think this is how directives should be used. Such as almost no angular build-in directives (ng-*) add HTML and just add a behavior i think all the directives should be build in this way.
Pro :
You have a full control about your HTML
Directives are tiny and trivial
This is really re-usable
Cons :
Can be harder and longer to implement.
To make a final point, the two way you're asking about are just different. No one is better than the other it will just depend on your own HTML organisation and it will depend on the directive use.
Hope it helped.
I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.
Let me give a simple example:
Employee
<div ng-show="canSeeSalary">
{{salary}}
</div>
Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.
I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.
My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.
Thanks in advance.
Try ng-if directive:
<div ng-if="canSeeSalary">
{{salary}}
</div>
Corresponding div element will be removed from the DOM. From the official documentation:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Use
Employee
<div ng-if="canSeeSalary">
{{salary}}
</div>
ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property
I would recommend using ngCloak rather than ngIf.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
example:
<div ng-cloak> {{::test}} </div>
ngCloak # Official Angular Docs
I'm trying to automate the Google Translate web interface with Selenium (but it's not necessary to understand Selenium to understand this question, just know that it finds elements and clicks them). I'm stuck on selecting the language to translate from.
I can't get to the point where the drop-down menu opens, as seen in the screenshot below.
Now, I want to select 'Japanese'.
This xpath expression works: $b.find_element(:xpath,"//*[#id=':13']/div").click But I would rather have one where I can just input the name of the language.
This xpath expression also works: $b.find_element(:xpath,"//*[contains(text(),'Japanese')]").click But only as long as there is no other 'Japanese' text on the page.
So I'm trying to narrow down the scope of my xpath, but when I try to specify the path to take to find the 'Japanese' text, the expression no longer works, I can't find the element: $b.find_element(:xpath,"//*div[#id='gt-sl-gms']/*[contains(text(),'Japanese')]").click
It also no longer works for the original xpath either: $b.find_element(:xpath,"//*div[#id='gt-sl-gms']/*[#id=':13']/div").click
Which is weird, because to bring down the drop-down menu, I use this xpath $b.find_element(:xpath,"//*[#id='gt-sl-gms']/*[contains(text(),'From:')]").click.
So it's not that I have two wildcards in my expression and it's not that my expression is too specific. There's something else that I'm missing and I'm sure it's really simple.
Any suggestions are appreciated.
Edit Other things I have tried unsuccessfully:
$b.find_element(:xpath,"//*/div[#id='gt-sl-gms']/*[#id=':13']/div").click
$b.find_element(:xpath,"//*[#id='gt-sl-gms']/*[#id=':13']/div").click
$b.find_element(:xpath,"//*[#id='gt-sl-gms']//*[#id=':13']/div").click
If the div with "#id=':13'" is an descendant of the div with "#id='gt-sl-gms" your xpaht "//*[#id='gt-sl-gms']//*[#id=':13']/div" would work.
The above xpaht expect that the html looks somehow like:
<div id="gt-sl-gms">
<div>
<div id=":13">
<div></div>
</div>
</div>
</div>
If <div id="gt-sl-gms"> in not an ancestor (as I expect) you have to look for an "real" ancestor, or you may use following (for nodes later in the document) or following-sibling (for nodes later in the document at the same level as the previous.
*div is incorrect, it should be just div. Also, depending on he structure of the HTML, you may need // instead of /.
Try selecting descendants (//) instead of (/*) which is really grandchildren or deeper.