Jquery check if div has data attribute and remove - javascript

How can I check if a div has a data-attribute and remove the div if it has that data-attribute, the opposite works like this:
$("div[id='foo']").not('[data-type=edit]').remove();

Remove the not() and use the attribute in the main selector:
$('#foo[data-type=edit]').remove();
If you only want to find the element that has the data-type attribute, regardless of its value, you can use this:
$('#foo[data-type]').remove();

if(typeof $("#foo").attr('data-type') == 'undefined')
{
$("#foo").removeAttr('data-type');
}

If you dont care about the value you can just do
$('#foo[data-type]').remove();

Related

Remove attribute title from all HTML elements

I want to compleately wipe the title attribute from all elements inside a html doc. From table, p, img, div etc..
Currently I do this:
$(document).ready(function(){
$("a").removeAttr("title");
$("img").removeAttr("title");
$("div").removeAttr("title");
// and so on
// and so on
// and so on
});
Is there a more elegant way to do this? Without selecting individual elements?
Use the attribute selector and select just the elements with the title attribute and not all elements.
$("[title]").removeAttr("title");
The all selector, *, selector should do the trick
$('*').removeAttr('title');
You can simply do this using All Selector (“*”):
$("*").removeAttr("title");
Without jQuery this would be:
Array.from(document.getElementsByTagName('*')).forEach(elem => elem.removeAttribute('title'));
or e.g. to remove the attribute only from specific tags, e.g. img:
Array.from(document.getElementsByTagName('img')).forEach(elem => elem.removeAttribute('title'));

Set the value of element by classname, without having the element's ID

Assume that we have the following code:
<span class="input-text">
<input type="search">
</span>
Is there any way, we could set the value of that without having the ID of the element?
Possible solutions are many. .val('your value') is the method to set the input tag value
jQuery
With class referring to span element
$('.input-text').find('input').val('value');
$('.input-text input').val('value'); // descendent selector
$('.input-text > input').val('value'); // direct children selector
Without referring to span element
$('input[type=search]').val('value'); // attribute selector
Javascript
$('.input-text').find('input')[0].value = 'value'
Or If you want to over write the content inside the <span> tag use
$('.input-text').html('content')
$('span.input-text').html('content')
You can do like this :-
$(".input-text").children().val('set any value you want to')
Use like this:
$('input[type="search"]').val("set your value");
You can use Attribute Equals Selector [name="value"]
$('input[type="search"]').val("Your Value");
or
$('.input-text input').val("you value");
DEMO
You should refer jQuery selectors. This would be more helpful to you.
try val() or value
$('input[type="search"]').val("Your Value");
or
$('input[type="search"]').value = "Your Value"
Try this:
$(".className").val("your value");

JQuery Find Elements With Data Object

I would like to find all elements inside a container that have a certain data attribute set to 1 as well as all elements that don't have this attribute set at all.
The data attribute is as follows:
$("#element").data("activate")
It can have a value of 1 or 0. If an element doesn't have an "activate" data property set I want to treat it as a 0.
I have the following code at present:
$("#content").find("[data-activate='0']").off();
However I would also like to do something like this:
$("#content").find("all where data-activate NOT exists").off();
ie if an element doesn't have the attribute even set.
You can use :not:
$('#content :not([data-activate])').off();
Or filter():
$('#content div').filter(function() {
return !$(this).attr('data-activate');
}).off();
$("#content").find(":not([data-activate])").off();
TRY
$("#content div").map(function {
$(this).data("activate","1")
}
This will simply add data-activate = 1 to all div inside #content whether it is 0 or that attribute does not exist
You can use the two selector at once to select the element, separting them (selectors) by comma
:not() Selector.
Attribute Equals Selector.
$("#content [data-activate='0'], #content :not([data-activate])").off();

Hide div based on value of attribute?

I'm looking to change the class (hide) of certain div's dependent on their attribute values.Here's my code, it might make a bit more sense once you've seen this:
jQuery('#menu1').click(function() {
jQuery([.attr('imageref')]!=[.attr('menuref')]).removeClass('pics').addClass('.pics-hidden').removeClass('pics').fadeOut(200);
jQuery('#projectimages').masonry('reload');
});
So what I'm after is that if you click on #menu1 it will remove .pics with the same imageref attribute as the #menu1 atrribute menuref.
So clicking on #menu1 which has menuref equal to 1, will hide the relevant .pics with an imageref also equal to 1.Hopefully that makes sense, any help would be greatly appreciated!
You can use the css selectors to make this.
ie:
jQuery('#menu1').click(function()
{
jQuery('[imgeref="menuref"]').removeClass('pics').addClass('pics-hidden');
});
edit:
this will search all the elements wich his atribute 'imageref' is set to 'menuref' and then remove the class pics and add the class pics-hidden.
if it's only necesary to img tags. then you could change:
jQuery('[imgeref="menuref"]')
to
jQuery('img[imgeref="menuref"]')
You might use the jQuery filter function.
http://api.jquery.com/filter/
Description: Reduce the set of matched elements to those that match the selector or pass the function's test.
var menuref = ("#menu1").attr('menuref')
// Get all pics with an imageref attribute
jQuery(".pics[imageref]")
// Filter them
.filter(function(){
return $(this).attr('imageref') != menuref;
})
// Do what ever you want e.g. remove the pics class
.removeClass('pics')
You use the attribute-equals selector, and concatenate into the selector the value of the menuref attribute.
jQuery('#menu1').click(function() {
var menu = $(this).attr('menuref');
jQuery(".pics[imageref='" + menu + "']").toggleClass('pics pics-hidden')
.fadeOut(200);
jQuery('#projectimages').masonry('reload');
});

Get elements in jQuery where "x" attribute = "y"

How can I change the attribute of an element, depending on another attribute?
For example, I have 2 <a> elements. They both have the class myClass. One of the elements has rel="1" and the other has rel="2". I wish to only change the z-index on the one which has rel=1. How do I do this?
I've tried:
$(".myClass[rel='1']").css("z-index", 10);
But it doesn't work. Cheers.
try this:
$(".myClass[rel='1']").css('display', 'none');
and see if it disappears. Then you will know if it is your selector, or positioning.
As z-index contains a hyphen you have to reference it in camel case:
$(".myClass[rel='1']").css("zIndex", 10);

Categories