How to remove both element in DOM with the same id in JavaScript?-CodePudding

What I am trying to do is, when I click on green element I want the purple one with the same id be removed. Now my problem is I can not loop through purple element's id and find the one which match with green one and then remove it from the DOM. I tried to use querySelectorAll but it doesn't work with addEventListener and when I use querySelector it just returns always the first element.So the goal is to remove both elements green and purple that has the same id.

if you see in HTML code inside the ul tag there is another one with the id container actually this is the problem the first ul tag with id main is the original one and the one inside it with id container it will be generated automatically with jQuery plugin if I set any new attribute to class main the class container will copy it. my goal is to click on green one and delete two elements from DOM. The one which I am clicking and another with same id. is there any way for that?

Has anyone solution for that how to remove simultaneously another element with the same id of clicked element?

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("ul").addEventListener("click", getItem)
})

function getItem(e) {
  let li = e.target.closest(".visible")
  let span = e.target
  let getID = span.attributes.id.value

  console.log("This is visible element", getID)


  if (li) {
    li.remove()
  }
}

#main {
  background-color: skyblue;
}

.hidden {
  border: solid 2px black;
  list-style: none;
  margin: 2px;
  background-color: #7d34eb;
}

#container {
  background-color: #3483eb;
  margin-top: 15px
}

.visible {
  border: solid 2px black;
  list-style: none;
  margin: 2px;
  background-color: #12a370;
}

span {
  position: relative;
  left: 1rem;
  padding: 50%;
  color: red;
  cursor: pointer;
}

<div class="content">

  <ul id="main">
    <li class="hidden">
      <span id="1">A</span>
    </li>

    <li class="hidden">
      <span id="2">B</span>
    </li>

    <li class="hidden">
      <span id="3">C</span>
    </li>

    <ul id="container">

      <li class="visible">
        <span id="1">A</span>
      </li>

      <li class="visible">
        <span id="2">B</span>
      </li>

      <li class="visible">
        <span id="3">C</span>
      </li>

    </ul>

  </ul>



</div>

CodePudding user response：

I changed all your spans to div to fill up the LI element. I also changed all id to data-id, because id should be a unique.

EDIT: Based on the comment. In your original post, you added a click listener on the first UL that querySelector returns, which is #main. I made that more clear in the code. As the comment, in my answer, suggest, it's better to add a click listener to ul#container instead.

EDIT 2: Based on another comment. :P I added code for looping through and removing all elements with matching data-id.

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("ul#main").addEventListener("click", getItem);
})

function getItem(e) {
  let divEl = e.target;
  let dataset = divEl.dataset;
  let visibleLi = divEl.parentElement;
  let isVisibleElement = visibleLi.classList.contains('visible');
  let matchingDatasetDivs = document.querySelectorAll(`[data-id="${dataset.id}"]`);

  if (isVisibleElement)
    console.log("This is visible element", dataset.id);

  if (isVisibleElement && matchingDatasetDivs.length) {
    for (let i = 0; i < matchingDatasetDivs.length; i  ) {
      let containerLi = matchingDatasetDivs[i].parentElement;
      containerLi.remove();
    }
  }
}

#main {
  background-color: skyblue;
}

.hidden, .visible {
  border: solid 2px black;
  list-style: none;
  margin: 2px;
  background-color: #7d34eb;
}

.visible {
  background-color: #12a370;
}

#container {
  background-color: #3483eb;
  margin-top: 15px
}

li > div {
  position: relative;
  left: 1rem;
  /* padding: 50%; */
  color: red;
  cursor: pointer;
  text-align: center; /* ADDED */
}

<div class="content">

  <ul id="main">
    <li class="hidden">
      <div data-id="1">A</div>
    </li>

    <li class="hidden">
      <div data-id="2">B</div>
    </li>

    <li class="hidden">
      <div data-id="3">C</div>
    </li>

    <ul id="container">

      <li class="visible">
        <div data-id="1">A</div>
      </li>

      <li class="visible">
        <div data-id="2">B</div>
      </li>

      <li class="visible">
        <div data-id="3">C</div>
      </li>

    </ul>

  </ul>



</div>