Select element by attribute only [duplicate] - javascript

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
JQuery, is there a way to select all elements on the page with a specific attribute?
My code
<html>
<body>
<script>
$(function(){
$("No idea what to write here").remove();
});
</script>
<button data-fun="a">Remove</button>
<div data-fun="b">Remoave</div>
<span data-fun="c">Remdove</span>
<strong data-fun="d">Rdemove</strong>
<b data-fun="e">Remosve</b>
<p data-fun="f">Remoe</p>
<div>Not Remove</div>
</body>
</html>
I want to remove all the elements that have the data-fun attribute no matter what the element is and value of data-fun is.


You can try this:
$(function() {
$("[data-fun]").remove();
})
Working sample


demo http://jsfiddle.net/JfBvG/
code
$(function(){
$("[data-fun]").remove();
});​

Related

How to apply javascripts to element wich has been overwrited by jquery .html() [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Here I have an example:
$('#key').on('click', function(){
$('.task').html("<button id='key'>Button</button>"+Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
</div>
How I can apply javascript for overwriting element and get different time for each button press?

Clearly there is no need to ovveride button here. Do not ovveride button. Use a span for date.
$('#key').on('click', function(){
$('.datestr').html(Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
<span class='datestr'></span>
</div>

How can I define something like OR in jQuery's selector? [duplicate]

This question already has answers here:
jQuery OR Selector?
(6 answers)
Closed 6 years ago.
Here is my current code:
$(".close_btn").click(function(e) {
$(".box1").fadeOut(100);
$(".box2").fadeOut(100);
});
As you see, currently, when you click on .close_btn, both .box1 and .box2 will be hidden. Now I want to use $(this) and .closest() to hide just one box (the parent of clicked .close_btn, there are two .close_btn). I mean I want something like this:
$(".close_btn").click(function(e) {
$(this).closest(".box1" OR ".box2").fadeOut(100);
});
Is doing that possible?

You can just use a comma to separate multiple selectors:
$(".close_btn").click(function(e) {
$(this).closest(".box2, .box1").fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<button class="close_btn">Close</button>
</div>
<div class="box2">
<button class="close_btn">Close</button>
</div>

Can we add an href attribute on div tag? [duplicate]

This question already has answers here:
Can I call a code behind function from a div onclick event?
(3 answers)
Closed 6 years ago.
I have a div tag and it has a link tag inside it as shown in the code. The link works only when I click on it. But I want to code in such a way that even when I click on div tag, it should go to the link. Please help as I am a beginner in javascript.
<div id="blockbuilding">
<a id="#data.bbuildingid" href="#Url.Action("Overview","Overview", new{BuildingId=#data.buildingID})" class="buildingAnchor""> #data.buildingName </a>
</div>

try this
$(document).ready(function () {
$("#blockbuilding").click(
function () {
AlertSave();
}
);
});
function AlertSave() {
alert("Alert Message OnClick");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockbuilding">
<a id="#data.bbuildingid" href="#Url.Action("Overview","Overview", new{BuildingId=#data.buildingID})" class="buildingAnchor""> #data.buildingName </a>
</div>

start function when div appear [duplicate]

This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 8 years ago.
In my HTML file I have a div with id="print" and when this div appears on the screen I would like to start function print(). How can I do this?
<div id="print">
</div>
function check(){
//check appear div
}
function print(){
//print data
}

like #TheShinyTuxedo suggested this can be resolved by adding a script right after the div is rendered.
look like that:
<div id="print">
</div>
<script type="text/javascript">
print();
</script>

Getting the HTML of an element in jQuery [duplicate]

This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 9 years ago.
I was trying to get the entire HTML of an element using jQuery. Of course, .html() grabs only the inner HTML, but I wanted to retrieve the wrapping HTML too.
Imagine the following HTML:
<div id="wrapper">
<div id="container_a">
<p>Container A</p>
</div>
<div id="container_b">
<p>Container B</p>
</div>
</div>
Now, If I would do $("#container_a").html() I'd get <p>Container A</p> clearly. However, I want to get the following:
<div id="container_a">
<p>Container A</p>
</div>
How would I achieve this?

You can do this using prop:
$("#container_a").prop('outerHTML');
FIDDLE DEMO

use outerHTML
$("#container_a")[0].outerHTML
using plain javascript
document.getElementById("container_a").outerHTML;

First use clone for temporary then get html
$('div').append($('#container_a').clone()).html();

This should work
<script>
var a=document.getElementById("container_a").outerHTML;
alert(a);
</script>
Instead of alert we may use variable a in any other way...

use outerHTML
$("#container_a")[0].outerHTML
Demo ---> http://jsfiddle.net/uBDHY/1/
https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML

you can use .outerHTML for this
$("#container_a")[0].outerHTML

Categories

Resources