Delete a class by clicking

Question

Delete a class by clicking

Navigation

#1 by (0 votes)

1

To certain elements that are accessed by their id and they are identified as List and wanted to delete the class if, and only if, it has the class ViewDelett0element . The code below was an attempt, I would like to know if there is any property or other way to do it.

The class is ViewDelett0element and first I put it with this code:

for (var p = 0; p <= List.children.length -1; p++) {
    List.children[p].addEventListener("click" , function() {
        this.setAttribute("class", "ViewDelett0element");
    });
}

And then I take it away with this other one

for (var k = 0; k <= List.children.length -1; k++){
    List.children[k].addEventListener("click" , function(){
        if(child.ClassName === ViewDelett0element){this.setAttribute("class", "");}
    });
}

What happens is that when you give a first click you add a class to the element and in the second click you deselect or remove the class, I suppose that when you want to remove the class with the second click, the other function that adds the class and it seems like there is no change.

javascript

asked by Emmanuel Ruiz 18.07.2016 в 21:31

source

1 answer

Installation of phonegap-facebook-plugin doubts Error running COM - CO_E_SERVER_EXEC_FAILURE - C #

score 0 · Accepted Answer

Right now you are checking that the class exactly matches the value of the variable ViewDelett0element , if you want to compare with the string "ViewDelett0element" you should quote the value. Also the attribute that the class will give you is not ClassName but className (with the c in lowercase). Finally, another change is that you do not define child anywhere, you should use this to refer to the child element.

Changing that the code would look like this:

for (var k = 0; k <= List.children.length -1; k++){
    List.children[k].addEventListener("click" , function(){
        if(this.className === "ViewDelett0element"){this.setAttribute("class", "");}
    });
}

Editing: to solve the problem that does not work because one function cancels the other, what you could do is put everything in a single function:

If the element does not have the class (initial case) and it is clicked on, the class
If the element contains the class, it is deleted.

In a single function it would be like this:

for (var k = 0; k <= List.children.length -1; k++){
  List.children[k].addEventListener("click" , function(){
    if(this.className === "ViewDelett0element"){
      this.setAttribute("class", "");
    } else 
    {
      this.setAttribute("class", "ViewDelett0element");
    }
  });
}

You can see a demo here:

List = document.getElementById("aux");
for (var k = 0; k <= List.children.length -1; k++){
  List.children[k].addEventListener("click" , function(){
    if(this.className === "ViewDelett0element"){
      this.setAttribute("class", "");
    } else 
    {
      this.setAttribute("class", "ViewDelett0element");
    }
  });
}

<div id="aux">
<div class="">A</div>
<div class="">B</div>
<div class="">C</div>
<div class="">D</div>
<div class="">E</div>
<div class="">F</div>
</div>