classList.replace should replace all classes xxx1yyy with xxxyyy-CodePudding

i tried to replace a class. found this working example: javascript: replace classList that is into a conditional

my modification (visible below) don't work.

classList.replace should replace all classes xxx1yyy with xxxyyy

means i need replace all classes like my1bla, mu1bla, my1hu, …1… and more to mybla, mubla, myhu, …

<!DOCTYPE html>
<html>
<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>
<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" >
I am a DIV element
</div>

<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.classList.contains("1")) {
    x.classList.replace("1", "");
} else if (x.classList.contains("1")) {
    x.classList.replace("1", "");
}
}
</script>

CodePudding user response：

Try this:

function myFunction() {
  var x = document.getElementById("myDIV");

  x.classList.value = x.classList.value.replace("1", "");
}

https://jsfiddle.net/3brfgLnd/1/

CodePudding user response：

You cant change it by a single word. .contains returns true or false & .replace will replace the whole className

<!DOCTYPE html>
<html>
<style>
  .my1bla {
    background-color: black;
  }
  
  .mybla {
    background-color: blue;
  }
</style>
<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" >
  I am a DIV element
</div>

<script>
  function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.classList.contains("my1bla")) {
      x.classList.replace("my1bla", "mybla");
    } else if (x.classList.contains("my1bla")) {
      x.classList.replace("my1bla", "mybla");
    }
  }
</script>

CodePudding user response：

You can use Element.classList.toggle

function myFunction() {
  const x = document.getElementById("myDIV")

  x.classList.toggle('my1bla')
  x.classList.toggle('mybla')
}

.my1bla {
  background-color: black;
}

.mybla {
  background-color: blue;
}

<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" >
  I am a DIV element
</div>

<script>
</script>

CodePudding user response：

You can do this using data attributes fairly easily. You alter the string of the data-class attribute and then set it again to the dataset.

const button = document.querySelector("button");
const boxes = document.querySelectorAll(".box");
let initial = true;
const checkClasses = () => {
  boxes.forEach(box => {
    let dataClass = box.dataset.class;
    if (initial) {
      let dataClass = box.dataset.class.split("1").join("");
      box.setAttribute('data-class', dataClass);
    }
  });
}
button.addEventListener("click", checkClasses);

body {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

div {
  height: 100px;
}

[data-] {
  background: royalblue;
}

[data-] {
  background: blue;
}

[data-] {
  background: tomato;
}

[data-] {
  background: red;
}

[data-] {
  background: olive;
}

[data-] {
  background: green;
}

button {
  margin: 1rem;
}

<div data- ></div>
<div data- ></div>
<div data- ></div>

<button>click me</button>

CodePudding user response：

If it is always going to be 1, you can use a contains for the selector so you do not have to loop over every element in the DOM

document.querySelectorAll("[class*='1']").forEach(elem => elem.classList.value = elem.classList.value.replace(/1/, ''));

.my1bla {
  background-color: black;
}

.mybla {
  background-color: blue;
}

<div id="myDIV" >
  I am a DIV element
</div>

<div id="myDIV" >
  I am a DIV element
</div>

<div id="myDIV" >
  I am a DIV element
</div>

<div id="myDIV" >
  I am a DIV element
</div>

<div id="myDIV" >
  I am a DIV element
</div>

CodePudding user response：

Based on the previous answers, I was able to come up with the following comprehensive solution:

<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>

<button onclick="myFunction()">change style class from DIV</button>
<div >I am a DIV element</div>

<script>
function myFunction() {
  var elems = document.body.getElementsByTagName("*");
for (i in elems) {
    ele = elems[i];
    if(ele.classList)
        ele.classList.value = ele.classList.value.replace("1", "");
};
}
</script>