Usunięcie diva po wpisaniu słowa

pytanie zadane 19 marca w JavaScript przez Infos Użytkownik (650 p.)
edycja 19 marca przez Infos

WITAM,czy powie mi ktoś jak zrobić by po

const wykonaj_button = document.querySelector('#wykonaj-button');
wykonaj_button.addEventListener('click', utworz);
 
function utworz() {
  const kwadrat = document.querySelector('#kwadrat');
  const ile_kwadraty = kwadrat.querySelectorAll('div').length;
  const MAKSYMALNA_KWADRATY = 15;
   
  if (ile_kwadraty >= MAKSYMALNA_KWADRATY) {
    alert(`Utworzyłeś maksymalną ilość kwadratów (${MAKSYMALNA_KWADRATY})`);
    return;
  }
   
  const value = document.querySelector('#pole-input').value.trim();  
  if (value.toLowerCase() === 'nowy div') {
    kwadrat.innerHTML += '<div></div>';
  }
}

<input type="text" id="pole-input" value="nowy div">
<button type="button" id="wykonaj-button">wykonaj</button>
 
<div id="kwadrat"></div>

#kwadrat {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
#kwadrat div {
  width: 100px;
  height: 100px;
  border: 2px solid red;
}

wpisaniu słowa usuń diva div usunął się i mógł to robić tyle i istnieje divów

2 odpowiedzi

odpowiedź 20 marca przez Nosferatu1922 Początkujący (260 p.)

Kiedyś nauczysz się reacta i nie będziesz miał takich probleów. A póki co - nie w ten sposób, zamiast wpisywać w div zawartość html z <div><div> najpierw stwórz sobie nowego diva poprzez 'createElement' a potem używaj 'appendChild' 'removeChild' czy czego tam jeszcze potrzebujesz żeby te divy dodawać i usuwać.

komentarz 20 marca przez VBService Ekspert (253,340 p.)

Można też użyć insertAdjacentHTML

kwadrat.insertAdjacentHTML('beforeend', '<div></div>');

komentarz 20 marca przez Infos Użytkownik (650 p.)

Dziękuję

komentarz 20 marca przez Infos Użytkownik (650 p.)

@Nosferatu1922, dzięki

odpowiedź 20 marca przez VBService Ekspert (253,340 p.)
edycja 22 marca przez VBService

Proponuje użyć switch-a np. tak, żeby poszczególne polecenia wywoływały odpowiednią "akcję"

[ pełny kod przykładu on-line ]

  const value = document.querySelector('#pole-input').value.trim().toLowerCase();
  // dostępne polecenia: dodaj, nowy,
  //                     usun(ń) pierwszy, usun(ń) ostatni, 
  //                     usun(ń) 1, usun(ń) 2, usun(ń) n-ty
  switch (value.split(' ')[0]) {
    case 'dodaj':
    case 'nowy': 
      dodajKwadrat();
      break;
    case 'usun':
    case 'usuń':
      if (value.includes('pierwszy')) usunKwadrat(0);
      else if (value.includes('ostatni')) usunKwadrat(kwadrat.childNodes.length - 1);
      else usunKwadrat(parseInt(value.split(' ')[1] ?? 0) - 1); // usuwanie wybranego
      break;
  }

function dodajKwadrat() {
  const ile_kwadraty = kwadrat.childNodes.length;    
  if (ile_kwadraty >= MAKSYMALNA_KWADRATY) {
    alert(`Utworzyłeś maksymalną ilość kwadratów (${MAKSYMALNA_KWADRATY})`);
    return;
  }
  kwadrat.insertAdjacentHTML('beforeend', '<div></div>');
}

function usunKwadrat(indeks) {
  if (kwadrat.hasChildNodes()) {
    if ((indeks < 0 || indeks > kwadrat.childNodes.length - 1) || isNaN(indeks)) return;
    kwadrat.removeChild(kwadrat.childNodes[indeks]);
  }
}