Given an HTML node from the dom,
I need to remove all inline event handlers / attributes such as: onclick, onmouseover, onmousedown etc.
I know that:
document.getElementById("some_id").attributes
returns all the attributes, and I can eliminate some attriubtes, but then there is also attributes like: id, class, name etc.
How do I seperate the two types of attributes?
Completely different approches for solving the problem are also an option.
EDIT: I'm trying to remove only inline events,
and I also need to "save" them elsewhere before deletion, so cloning for complete disposal is not an option
Here you get all element attributes, make an array of em, check in for loop if any attribute starts with on. Then make an object with name/value of that inline event handler, push it into array, and at the end remove it from the node:
var el = document.getElementById("button1");
var listOfEvents=[];
var attributes = [].slice.call(el.attributes);
for (i = 0; i < attributes.length; i++){
var att= attributes[i].name;
if(att.indexOf("on")===0){
var eventHandlers={};
eventHandlers.attribute=attributes[i].name;
eventHandlers.value=attributes[i].value;
listOfEvents.push(eventHandlers);
el.attributes.removeNamedItem(att);
}
}
Check the below snippet
var el = document.getElementById("button1");
var listOfEvents = [];
var attributes = [].slice.call(el.attributes);
for (i = 0; i < attributes.length; i++) {
var att = attributes[i].name;
if (att.indexOf("on") === 0) {
console.log(att);
var eventHandlers = {};
eventHandlers.attribute = attributes[i].name;
eventHandlers.value = attributes[i].value;
listOfEvents.push(eventHandlers);
el.attributes.removeNamedItem(att);
}
}
console.log(listOfEvents);
/* logs [[object Object] {
attribute: "onmousedown",
value: "mouseDown();"
}, [object Object] {
attribute: "onmouseup",
value: "mouseUp();"
}, [object Object] {
attribute: "onclick",
value: "doSomething(this);"
}] */
<div>
<input id="button1" type="button" onmousedown="mouseDown();" onmouseup="mouseUp();" onclick="doSomething(this);" value="Click Me" />
</div>
Filter all attributes whose name starts with 'on'.
If you can name all the handlers you want to remove/check then this will work for you (it is basically searching for the attributes you give it and removes/saves them - added bonus, you can also remove some other attributes you want the same way, just add them to the list):
JSFiddle example
Btw, IDK wtf am i suppose to post as "obligatory code" when linking fiddleJS... just check the link I extracted the javascript here but you are missing html
var dataStorage = {};
function someFunction(num) {
alert(num);
};
function removeInlineHandlers(elementID) {
//Define all the attributes you want to remove;
var removeableAttributes = ["onclick", "onhover", "onmouseout"];
var attributes = document.getElementById(elementID).attributes;
var addFlag = true;
var i = 0;
var j = 0;
for (i = 0; i < attributes.length; i++) {
for (j = 0; j < removeableAttributes.length; j++) {
if (attributes[i].name == removeableAttributes[j]) {
// If this is the first attribute to be removed, add an object
// to track the data of removeals.
if (addFlag) {
dataStorage[elementID] = {};
addFlag = false;
}
dataStorage[elementID][attributes[i].name] = attributes[i].nodeValue;
document.getElementById(elementID).removeAttribute(attributes[i].name);
break;
}
}
}
}
function removeHandlersAndPrint() {
removeInlineHandlers("btn1");
removeInlineHandlers("btn2");
removeInlineHandlers("btn3");
removeInlineHandlers("btn4");
console.log(dataStorage);
}
Related
I can make variables one by one like this:
var bookName = document.getElementById('bookName').value,
author = document.getElementById('author').value,
translator = document.getElementById('translator').value,
pageCount = document.getElementById('pageCount').value,
publisher = document.getElementById('publisher').value,
isbn = document.getElementById('isbn').value,
printingYear = document.getElementById('printingYear').value;
But it's so hard to write and it doesn't fit with the DRY rule. So I changed the code to this:
function variableMaker(argument) {
var tags = document.getElementsByTagName(argument);
for (var i = 0; i < tags.length; i++) {
var tags[i].name = tags[i].value;
}
}
variableMaker(input);
But I can't understand if it is the true way or if it is working? How do I check if it's true or not?
In this code, I tried to get the computer find all the input tags and make variables with their name property and assign it to its values for each of them.
If I understand correctly then you want to gather data from all <input> elements. If so, then you need to call it like this:
variableMaker('input'); // use quotes!
Still even then your function does not return anything, it just ends.
You'd also better create your own object for the return collection, instead of adding values to an existing object.
Here is a working solution:
function variableMaker(tagName) {
var elements = document.getElementsByTagName(tagName);
var items = {};
for (var i = 0; i < elements.length; i++) {
var elem = elements[i];
items[elem.id] = elem.value; // Use id as key, each points to the corresponding value.
}
return items;
}
var values = variableMaker('input');
console.log(values); // show the entire return object
console.log(values.author); // access individual items from the return object
console.log(values.isbn);
<input type="text" id="author" value="Dahl">
<input type="text" id="isbn" value="1234">
.
Essentially what I'm trying to do right now is, given some input text, I split it up by white space and display on a
div id= "animation"
Every time a button is clicked, the array should go forward one word.
This is my current attempt.
function displayText() {
var displayText = document.getElementbyID("animation");
var list = (document.getElementbyID("input").split(/[ \tn]+/);
for (var i = 0; i < list.length; i++) {
displayText.innerHTML = list.get[i];
}
}
Is my thought process somewhat correct? For whatever reason, it doesn't seem to be working.
there are multiple issues in your method
function displayText() {
var displayTextAnimation = document.getElementbyID("animation"); //keep variable name and method name different
var list = (document.getElementbyID("input").value).split(/[ \tn]+/); //use value property and observe extra bracket
for (var i = 0; i < list.length; i++) {
displayTextAnimation.innerHTML = list.charAt(i); //observe replacing get by charAt
}
}
My app dynamically creates and deleted new elements based on the + / - buttons.
Inside the dynamically created elements are text forms. I want whatever the user types into the text form to be displayed in another dynamically created element.
$('.LName').keyup(function(event) {
var crazy = {};
for (var x = 1; x < i; x++) {
crazy[x] = function() {
$('#sideChange'+ x).keyup(function(event) {
var value = $(this).val();
$('.sLoan'+ x).text(value);
})
}
}
for (var p = 1; p < i; p++) {
crazy[p]();
}
});
For example, I accomplished this for changing the text in the previous element by including the function in the html onkeyup attribute, but I don't know how to accurately target other elements.
var changeTitle = function() {
var loanTitle = $(this).val();
var code = $("input[type='text'][name='loanName']").keyCode || $("input[type='text'][name='loanName']").which;
var length = loanTitle.length;
console.log(length);
if(length < 1 || code == 8) {
$(this).prev().text('Loan');
}
else {
$(this).prev().text(loanTitle);
}
};
What youll probably want to do is data bind the two elements with some sort of ID you generate. In the fiddle below, I just use an incrementing number. When the keyup happens, I grab that elements data-id and use it to find its "mirrored" input.
$('.mirror[data-id="'+id+'"]').val(text);
Your question was a bit vague but I think this is what you were asking for.
http://jsfiddle.net/swoogie/f8cd4voz/
Is it possible to write a JQuery function that will remove everything with a specific :before content.
here is an example statement to give you something to show me with code:
remove all elements in the document that have a :before pseudo element with content set to "delete me"
Mhh, you can try something like this:
var sheets = document.styleSheets;
var len = sheets.length;
var ba = /:before|:after/;
// Loop throught all stylesheets
for (var i = 0; i < len; i++) {
// work out which method to get the CSS rules
var sheet = sheets[i],
rules = sheet.cssRules || sheet.rules;
// Loop through all rules
for (var r = 0, rule; rule = rules[r++];) {
// if this rule uses one of the test selectors
if (rule.selectorText.match(ba)) {
if (rule.style.content.indexOf('delete me') !== -1) {
var elems = document.querySelectorAll(rule.selectorText.split(':')[0]);
for (var e = 0, elem; elem = elems[e++];) {
// remove the node
document.body.removeChild(elem);
}
}
}
}
}
http://fiddle.jshell.net/6m5kB/1/
there is simple answer just add class on that element with before and remove it through that class. pseudo-element does not exist in dom that why you cannot directly remove them through jquery or js
Is there a way to get multiple attributes in jQuery
<input type="text" title="hello there" class="maiz"/>
(function() {
var inputTitle = $("input").attr("title","class");
console.log(inputTitle[1])//output:undefined
})();
I'm new to jQuery
You can't get multiple attributes, you just have to call attr again:
var input = $("input");
var title = input.attr("title");
var cls = input.attr("class");
Your example sets the value "class" to the title attribute.
Or more similar to your original code:
var inputTitle = [input.attr("title"), input.attr("class")];
inputTitle[1]; // gives you 'maiz'
You can try this:
for (var i = 0; i < elem.attributes.length; i++) {
var attrib = elem.attributes[i];
if (attrib.specified == true) {
console.log(attrib.name + " = " + attrib.value);
}
}
You can get the attributes using the attributes property on the element object:
var el = document.getElementById("someId");
var attributes = el.attributes; // Here they are
In jQuery you can get the Original element with the get() method, like:
var el = $("input").get(0);
var attributes = el.attributes; // Here they are
Try this:
$('.maiz').click(function(){
for(var i = 0;i < this.attributes.length;i++){
console.log(this.attributes[i]);
}
});
Demo
Jquery selector works pretty much like the CSS selector.
$('selector') if you want to select all elements if a particular class
$('.class') if you want to select class and id
$('.class, #id')
that's basically it. unless you have a specific question