0

I'm not sure why but for some reason the class is getting added but is not activating. What could be the reason?

let phone = document.querySelector("#phoneIcon")
phone.addEventListener("click", function() {
  phone.classList.add("phoneIconClick")
  phone.parentNode.removeChild(phone)
})
#aside {
  clear: both;
  float: right;
  margin: 5%;
}

#phoneIcon {
  font-size: 30px;
  border: solid;
  padding: 5px;
  border-radius: 50%;
  position: fixed;
}

.phoneIconClick {
  font-size: 15px;
  border: solid;
  padding: 10px 0px 10px 300px;
  border-radius: 10%;
}
<aside id="aside">
  <span id="phoneIcon"><i class="fas fa-phone"></i></span>
</aside>
j08691
  • 204,283
  • 31
  • 260
  • 272
Dean Marko
  • 9
  • 1
  • 5
  • 1
    Are you removing the element after adding a class to it? What are you trying to achieve exactly? – Ofir Baruch Sep 13 '21 at 18:58
  • 1
    You are removing the span element from the DOM with this line `phone.parentNode.removeChild(phone)`. Therefore, it disappears after clicking on it. – Tobi Obeck Sep 13 '21 at 19:02
  • Even if you removed the line `phone.parentNode.removeChild(phone)`, the styles of the `.phoneIconClick` will not be applied, because `#phoneIcon` has a higher specificity. Use `#phoneIcon.phoneIconClick` instead. – Sebastian Simon Sep 13 '21 at 19:08
  • So i now removed "phone.parentNode.removeChild(phone)" and its still not solving my problem – Dean Marko Sep 13 '21 at 19:11
  • is there a way to remove an ID. Thats what I thought that ID had a higher specifity then class that why i did remove child and where would I use what ou said? in the css? @SebastianSimon – Dean Marko Sep 13 '21 at 19:14
  • @DeanMarko I’d recommend adding a default class to ``, e.g. `class="phoneIcon"` and then targeting `.phoneIcon` instead of `#phoneIcon`. That way, both selectors have the same specificity. Alternatively, simply replacing `.phoneIconClick` by `#phoneIcon.phoneIconClick` in the CSS works, too (also same specificity, but which one is better depends on the use case). There’s a workaround, using the `!important` priority, but that’s not recommended. – Sebastian Simon Sep 13 '21 at 19:17
  • @SebastianSimon how do itarget it specifically? with another query selector? – Dean Marko Sep 13 '21 at 19:20
  • In the CSS. If you have ``, then use `.phoneIcon { font-size: 30px;`…`}` instead of `#phoneIcon { font-size: 30px;`…`}`. If you decide to not add the `class="phoneIcon"`, replace `.phoneIconClick` by `#phoneIcon.phoneIconClick` in the CSS. – Sebastian Simon Sep 13 '21 at 19:24
  • @SebastianSimon amazing thank you so much it worked out...so just for me to know why would I keep the ID in then? – Dean Marko Sep 13 '21 at 19:29
  • See [the `id` vs. `class` post](/q/544010/4642212). It depends on the use case. For example: do you have a single phone icon on the entire document? Is there no possibility for a second phone icon to exist? Is the phone icon really so unique that it deserves an ID? Does this specific element need to be found for any other purposes (e.g. changing the phone icon to something else)? If you mostly answer _yes_, then using `id` is justified. However: are there, or could there be, multiple phone icons? Is the phone icon _not_ special? Then use `class`. These decisions come with experience. – Sebastian Simon Sep 13 '21 at 19:38

0 Answers0