How do I remove a DOM element property?-CodePudding

If I have an element with the property className set to "test", how do I remove the HTML attribute associated with that property?

Example of what I'm trying to achieve:

const set = (el, prop, value) => el[prop] = value;
const rm  = (el, prop)        => delete el[prop]; // How do I do this?

const el = document.createElement("div");

set(el, "className", "test"); // el: <div ></div>
rm (el, "className");         // el: <div></div>

Do I have to map properties to attributes and use removeAttribute()? If so, is there a mapping provided by the DOM that I can use? Or do I have to write my own?

Or is there something like delete el.className that I can use?

Same question for other attributes such as onclick, htmlFor, etc.

Example:

const el = document.createElement("div");
el.className = "test";

// How do I unset className?
delete el.className; // Doesn't do anything.
el.className = null; // Sets the string "null". Same for "undefined".

// Do I need to do this?
// If so, can I get this from somewhere in the DOM?
const propToAttrMap = { "className": "class", "htmlFor": "for", ... };
el.removeAttribute(propToAttrMap["className"]);

CodePudding user response：

Try setting the property to an empty string. It doesn't necessarily remove the attribute but should nullify it. For Boolean types like disabled it should work similarly.

The one caveat I can think of is that once an element has been given an attribute, it will appear under query selectors it would have been absent from previously.

const set = (el, prop, value) => el[prop] = value;
const rm  = (el, prop)        => el[prop] = "";

const btn = document.querySelector("button")
const div = document.querySelector("div")

console.log("original:", div.innerHTML)
console.log("classy elements:",
  document.querySelectorAll("[class]").length)

set(btn, "className", "red")
set(btn, "disabled", true)
console.log("set both:", div.innerHTML)

rm(btn, "className")
console.log("rm className:", div.innerHTML)

rm(btn, "disabled")
console.log("rm disabled:", div.innerHTML)
console.log("classy elements:",
  document.querySelectorAll("[class]").length)

<div><button>Click me!</button></div>

CodePudding user response：

class is your attribute & in order to remove any attribute, you just need to write:

el.removeAttribute('your_attribute')

In your case:

el.removeAttribute('class')

CodePudding user response：

While jQuery provides an extra method(addProp() and removeProp()) for setting and getting element property values, Yes there's no such big thing in plain JavaScript. Element properties, such as href, title, alt, and value, are directly accessible as JavaScript object properties.

Find below one example.

var el = document.querySelector('a');
console.log(el.href);
if (el.title != 'Welcome') el.title = 'Welcome';

var inp = document.querySelector('input[type="text"]');
console.log(inp.value);
inp.value = 'Hello World!';

Even you can add and delete new property to a DOM element as shown below.

var el = document.querySelector('div');
el.animal= { name: 'Lion'};
console.log(el.animal);
delete el.foo;

Thanks