• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Usunięcie diva po wpisaniu słowa

VPS Starter Arubacloud
0 głosów
143 wizyt
pytanie zadane 19 marca w JavaScript przez niezalogowany
edycja 19 marca

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

0 głosów
odpowiedź 20 marca przez Nosferatu1922 Początkujący (340 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 (255,840 p.)

Można też użyć insertAdjacentHTML

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

 

komentarz 20 marca przez niezalogowany
Dziękuję
komentarz 20 marca przez niezalogowany

@Nosferatu1922,  dzięki 

0 głosów
odpowiedź 20 marca przez VBService Ekspert (255,840 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]);
  }
}

 

komentarz 20 marca przez niezalogowany
DZIĘKUJĘ BARDZO

Podobne pytania

–1 głos
2 odpowiedzi 461 wizyt
pytanie zadane 3 marca w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 174 wizyt
pytanie zadane 2 marca w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 412 wizyt

93,004 zapytań

141,969 odpowiedzi

321,248 komentarzy

62,340 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...