JavaScript, usuwanie elementu, potrzebna szybka pomoc

pytanie zadane 24 czerwca 2018 w JavaScript przez Req2030 Nowicjusz (150 p.)

Witam wykonałem skrypt który tworzy mi div o danym id, w moim wypadku to id "punkt" . skrypt ten tworzy taką listę z divow. program ładnie działa i tworzy divy, problem pojawia sie przy usuwaniu ich, chcę usunąć konkretny div po kliknięciu w niego lecz usuwa mi pierwszy z góry, podejrzewam ze powodem jest to ze każdy div z listy ma on samo id i usuwa ten który został jako pierwszy stworzony.

Zna ktoś moze sposób na usuwanie spośród kilku divow o tym samym id konkretnego ktory zostanie kliknięty ?

komentarz 24 czerwca 2018 przez MrxCI Dyskutant (8,260 p.)

Można przypisać event do kasacji danego diva, ale trochę problem gdy każdy ma ten sam ID, ID powinny być unikalne.

2 odpowiedzi

odpowiedź 24 czerwca 2018 przez pablop76 VIP (123,180 p.)
wybrane 24 czerwca 2018 przez Req2030

Najlepsza

Należy wykorzystać delegację

<div class="container">
  <button id="add">add</button>
    <div class="ractangle">
      ...
    </div>
  </div>
</div>

body {
  background: #a53329;
}
button{
  display: block;
  margin: 0 auto;
  width: 90px;
  height: 30px;
  background: #744253;
  border: none;
  color: #fff;
  cursor: pointer;
}
button:hover{
  background: #464258;
}
.container {
  width: 106px;
  min-height: 100px;
  background: #b49286;
  margin: 0 auto;
  padding: 1.5px 0;
}
.square{
  position: relative;
  width: 100px;
  height: 100px;
  background-color:#d84336;
  margin: 3px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  cursor: pointer;
}
.square:hover:before{
  content: "delete";
  position: absolute;
  width: 100px;
  height: 100px;
  background-color:#744253;
  top: 0;
  left: 0;
}

const addBtn = document.getElementById("add");
const ractangle = document.querySelector(".ractangle");
let item = 1;
addBtn.addEventListener("click",function(){
  const el = document.createElement("div");
  el.id = "punkt";
  el.innerText = "Tekst " + item;
  el.classList.add("square");
  ractangle.appendChild(el);
  item++;
});
ractangle.addEventListener("click",function(e){
    e.target.remove();
    item = 1;
});

metoda remove() nie jest wspierana przez IE :) Więc poszukaj innego rozwiązania.

komentarz 24 czerwca 2018 przez Req2030 Nowicjusz (150 p.)
edycja 24 czerwca 2018 przez Req2030

Dięki wielkie

Nie jestem za dobry w JS bo dopiero zaczynam, rozumiem ze .target odpowiada za wyznaczenie który div został kliknięty tak ?

komentarz 24 czerwca 2018 przez pablop76 VIP (123,180 p.)

Tak.

Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.

odpowiedź 24 czerwca 2018 przez Muhin Gaduła (4,120 p.)

Możesz podczas tworzenia divów dodać do nich onclicki:

<div id="punkt" onclick="usun(this)"></div>

W taki sposób w funkcji usun() dostaniesz bezpośredni dostęp do tego konkretnego diva. Dodam jeszcze, że nie powinno robić się wielu divów o tym samym id. Lepiej nadaj im klasę.

komentarz 24 czerwca 2018 przez Mariusz08 Maniak (62,300 p.)

Nie korzystamy z onclick, lepiej do tego celu użyć addEventListener

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

komentarz 24 czerwca 2018 przez Muhin Gaduła (4,120 p.)

To racja, ale nie wiem czy w jego przypadku to będzie działać. Zauważ, że dla wszystkich divów ma to samo ID. Teraz nie pamiętam, ale to chyba może stworzyć jakieś konflikty w przypadku eventów.