0
183
Vistas¿Cómo elimino una propiedad de elemento DOM?
Si tengo un elemento con la propiedad className establecida en "prueba", ¿cómo elimino el atributo HTML asociado con esa propiedad?
Ejemplo de lo que estoy tratando de lograr:
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 class="test"></div> rm (el, "className"); // el: <div></div> ¿Tengo que asignar propiedades a atributos y usar removeAttribute() ? Si es así, ¿hay una asignación proporcionada por el DOM que pueda usar? ¿O tengo que escribir el mío?
¿O hay algo como delete el.className que pueda usar?
La misma pregunta para otros atributos como onclick , htmlFor , etc.
Ejemplo:
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"]);3 Respuestas
Responde la pregunta0
Intente establecer la propiedad en una cadena vacía. No elimina necesariamente el atributo, pero debería anularlo. Para tipos booleanos como disabled , debería funcionar de manera similar.
La única advertencia en la que puedo pensar es que una vez que se le ha dado un atributo a un elemento, aparecerá en los selectores de consulta en los que habría estado ausente anteriormente.
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>0
class es su atributo y para eliminar cualquier atributo, solo necesita escribir:
el.removeAttribute('your_attribute')En tu caso:
el.removeAttribute('class') 
0
Si bien jQuery proporciona un método adicional (addProp() y removeProp()) para configurar y obtener los valores de las propiedades de los elementos, sí, no hay nada tan importante en JavaScript simple. Las propiedades de los elementos, como href, title, alt y value, son directamente accesibles como propiedades de objeto de JavaScript.
Encuentre a continuación un ejemplo.
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!';Incluso puede agregar y eliminar nuevas propiedades a un elemento DOM como se muestra a continuación.
var el = document.querySelector('div'); el.animal= { name: 'Lion'}; console.log(el.animal); delete el.foo;Gracias