How to hide an element if it has this id and class-CodePudding

I am have this div here which I'm using with the drag and drop API:

<div  draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>

If I drag this element:

<div  draggable="true" style="background-color: #1DDBCA;margin:10px;display:inline-block" id=" "><span>Boş</span></div>

and drop it on the div it works fine but I want it to hide itself if it has this " " id and has the student class. But it shouldn't hide it otherwise.

I need to add something to it so that it hides the element if it has the " " id and the "student" class after being dropped. How can I do that?

const boxElements = document.querySelectorAll(".box");

boxElements.forEach(elem => {
  elem.addEventListener("dragstart", dragStart);
  // elem.addEventListener("drag", drag);
  elem.addEventListener("dragend", dragEnd);
  elem.addEventListener("dragenter", dragEnter);
  elem.addEventListener("dragover", dragOver);
  elem.addEventListener("dragleave", dragLeave);
  elem.addEventListener("drop", drop);
});

// Drag and Drop Functions

function dragStart(event) {
  event.target.classList.add("drag-start");
  event.dataTransfer.setData("text", event.target.id);
}

function dragEnd(event) {
  event.target.classList.remove("drag-start");
}

function dragEnter(event) {
  if (!event.target.classList.contains("drag-start")) {
    event.target.classList.add("drag-enter");
  }
}

function dragOver(event) {
  event.preventDefault();
}

function dragLeave(event) {
  event.target.classList.remove("drag-enter");
}

function drop(event) {
  event.preventDefault();
  event.target.classList.remove("drag-enter");
  const draggableElementId = event.dataTransfer.getData("text");
  const droppableElementId = event.target.id;
  if (draggableElementId !== droppableElementId) {
    const draggableElement = document.getElementById(draggableElementId);
    const droppableElementBgColor = event.target.style.backgroundColor;
    const droppableElementTextContent = event.target.querySelector("span").textContent;

    event.target.style.backgroundColor = draggableElement.style.backgroundColor;
    event.target.querySelector("span").textContent = draggableElement.querySelector("span").textContent;
    event.target.id = draggableElementId;
    draggableElement.style.backgroundColor = droppableElementBgColor;
    draggableElement.querySelector("span").textContent = droppableElementTextContent;
    draggableElement.id = droppableElementId;
  }
}

@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #333;
}

.box {
  width: 80px;
  border: 3px solid #333;
  border-radius: 0.5rem;
  margin: 1.25rem;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  user-select: none;
  cursor: move;
  transition: 0.5s;
}

.box span {
  pointer-events: none;
}


/* Drag and Drop Related Styling */

.drag-start {
  opacity: 0.4;
}

.drag-enter {
  border-style: dashed;
}

.box:nth-child(odd).drag-enter {
  transform: rotate(15deg);
}

.box:nth-child(even).drag-enter {
  transform: rotate(-15deg);
}

.box:nth-child(odd).drag-start {
  transform: rotate(15deg) scale(0.75);
}

.box:nth-child(even).drag-start {
  transform: rotate(-15deg) scale(0.75);
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
  .box {
    width: 4rem;
    height: 4rem;
    margin: 0.5rem;
  }
}

<div  draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>


<div  draggable="true" style="background-color: #1DDBCA;margin:10px;display:inline-block" id=" "><span>Boş</span></div>

CodePudding user response：

As @connexo said, working with space characters within ids or classes leads to invalid HTML, so to get the desired result you can use another class (e.g. 'drag-end') to set the desired properties:

.student.drag-end {
    display: none;
}

For instance, the above css will apply to the element <element >

CodePudding user response：

Having empty IDs or IDs with space is not a good way. I would use a data attribute

Anyway:

function dragEnd(event) {
  const tgt = event.target
  if (tgt) {
    tgt.classList.remove("drag-start");
    if (tgt.id.trim() === "" && tgt.classList.contains("student")) {
      tgt.remove()
    }
  }
}

const boxElements = document.querySelectorAll(".box");

boxElements.forEach(elem => {
  elem.addEventListener("dragstart", dragStart);
  // elem.addEventListener("drag", drag);
  elem.addEventListener("dragend", dragEnd);
  elem.addEventListener("dragenter", dragEnter);
  elem.addEventListener("dragover", dragOver);
  elem.addEventListener("dragleave", dragLeave);
  elem.addEventListener("drop", drop);
});

// Drag and Drop Functions

function dragStart(event) {
  event.target.classList.add("drag-start");
  event.dataTransfer.setData("text", event.target.id);
}

function dragEnd(event) {
  const tgt = event.target
  if (tgt) {
    tgt.classList.remove("drag-start");
    console.log(tgt.className)
    if (tgt.id.trim() === "" && tgt.classList.contains("student")) {
      tgt.remove()
    }
  }
}

function dragEnter(event) {
  if (!event.target.classList.contains("drag-start")) {
    event.target.classList.add("drag-enter");
  }
}

function dragOver(event) {
  event.preventDefault();
}

function dragLeave(event) {
  event.target.classList.remove("drag-enter");
}

function drop(event) {
  event.preventDefault();
  event.target.classList.remove("drag-enter");
  const draggableElementId = event.dataTransfer.getData("text");
  const droppableElementId = event.target.id;
  if (draggableElementId !== droppableElementId) {
    const draggableElement = document.getElementById(draggableElementId);
    const droppableElementBgColor = event.target.style.backgroundColor;
    const droppableElementTextContent = event.target.querySelector("span").textContent;

    event.target.style.backgroundColor = draggableElement.style.backgroundColor;
    event.target.querySelector("span").textContent = draggableElement.querySelector("span").textContent;
    event.target.id = draggableElementId;
    draggableElement.style.backgroundColor = droppableElementBgColor;
    draggableElement.querySelector("span").textContent = droppableElementTextContent;
    draggableElement.id = droppableElementId;
  }
}

@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #333;
}

.box {
  width: 80px;
  border: 3px solid #333;
  border-radius: 0.5rem;
  margin: 1.25rem;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  user-select: none;
  cursor: move;
  transition: 0.5s;
}

.box span {
  pointer-events: none;
}


/* Drag and Drop Related Styling */

.drag-start {
  opacity: 0.4;
}

.drag-enter {
  border-style: dashed;
}

.box:nth-child(odd).drag-enter {
  transform: rotate(15deg);
}

.box:nth-child(even).drag-enter {
  transform: rotate(-15deg);
}

.box:nth-child(odd).drag-start {
  transform: rotate(15deg) scale(0.75);
}

.box:nth-child(even).drag-start {
  transform: rotate(-15deg) scale(0.75);
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
  .box {
    width: 4rem;
    height: 4rem;
    margin: 0.5rem;
  }
}

<div  draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>


<div  draggable="true" style="background-color: #1DDBCA;margin:10px;display:inline-block" id=" "><span>Boş</span></div>