Menüpont törlése jQuery-vel

Menüpont törlése jQuery-vel
2020-10-25T01:19:48+02:00
2020-10-25T18:12:13+01:00
2022-10-15T21:26:03+02:00
lgyaraki
Sziasztok!

Van egy alkalmazásom, melyben a generált menü az alábbi struktúrájú:

<nav id="sidebar" class="navbar-dark bg-dark"> <ul id="menu-q1oxmfy3dapu" class="nav navbar-nav w-100 flex-column align-self-start"> <li class="nav-item"> <a class="nav-link active" href="kezdooldal"> <i class="fa fa-dashboard "></i> <span class="menu-label">Irányítópult</span> </a> </li> <li class="nav-item "> <a class="nav-link dropdown-toggle" href="#menu-nhrcmg7ox5ly" data-boundary="viewport" data-toggle="collapse"> <i class="fa fa-medkit "></i> <span class="menu-label">Menüpont1</span> </a> <ul id="menu-nhrcmg7ox5ly" class="collapse submenu list-unstyled" data-parent='#menu-q1oxmfy3dapu'> <li class="nav-item"> <a class="nav-link " href="vegoldal1"> <i class="fa fa-empire "></i> <span class="menu-label">vegoldal1</span> </a> </li> <li class="nav-item"> <a class="nav-link " href="vegoldal2"> <i class="fa fa-plus "></i> <span class="menu-label">vegoldal2</span> </a> </li> </ul> </li> <li class="nav-item "> <a class="nav-link dropdown-toggle" href="#menu-qyruvaefi0x9" data-boundary="viewport" data-toggle="collapse"> <i class="fa fa-windows "></i> <span class="menu-label">Menüpont2</span> </a> <ul id="menu-qyruvaefi0x9" class="collapse submenu list-unstyled" data-parent='#menu-q1oxmfy3dapu'> <li class="nav-item "> <a class="nav-link dropdown-toggle" href="#menu-9zrmcjuy5h3x" data-toggle="collapse"> <span class="menu-label">almenü2/1</span> </a> <ul id="menu-9zrmcjuy5h3x" class="collapse submenu list-unstyled" data-parent='#menu-qyruvaefi0x9'> </ul> </li> <li class="nav-item "> <a class="nav-link dropdown-toggle" href="#menu-687mo4esgbk3" data-toggle="collapse"> <span class="menu-label">almenü2=2</span> </a> <ul id="menu-687mo4esgbk3" class="collapse submenu list-unstyled" data-parent='#menu-qyruvaefi0x9'> </ul> </li> </ul> </li> <li class="nav-item "> <a class="nav-link dropdown-toggle" href="#menu-qsout2rhydlw" data-boundary="viewport" data-toggle="collapse"> <i class="fa fa-balance-scale "></i> <span class="menu-label">Menüpont3</span> </a> <ul id="menu-qsout2rhydlw" class="collapse submenu list-unstyled" data-parent='#menu-q1oxmfy3dapu'> </ul> </li> <li class="nav-item "> <a class="nav-link dropdown-toggle" href="#menu-si7akmtc30wb" data-boundary="viewport" data-toggle="collapse"> <i class="fa fa-institution "></i> <span class="menu-label">menüpont3/1</span> </a> <ul id="menu-si7akmtc30wb" class="collapse submenu list-unstyled" data-parent='#menu-q1oxmfy3dapu'> <li class="nav-item "> <a class="nav-link dropdown-toggle" href="#menu-t46lo1hu9ds7" data-toggle="collapse"> <i class="fa fa-home "></i> <span class="menu-label">menüpont3/2</span> </a> <ul id="menu-t46lo1hu9ds7" class="collapse submenu list-unstyled" data-parent='#menu-si7akmtc30wb'> </ul> </li> </ul> </li> </ul> </nav>
Törölni szeretném az összes olyan nav-link osztályú elemet, melyen belül nincs végoldalra mutató link.
Amit próbáltam, törölte az utolsó üres elemet a főmenü gyökeréből:

$("ul.submenu").each( function() { var ul_element = $(this); if (ul_element.children().length == 0) { ul_element.parent().remove(); } } ); });
Én Ez viszont csak akkor hozz a megfelelő eredményt, ha kétszer lefuttatom (akkor meg fel a gyökérig). Kérdésem: hogyan lehetne egy menetben megoldani a törlést?
Mutasd a teljes hozzászólást!
btw amit te írtál, annak megfelelő ez:
$(':has(>.submenu:not(:has(>*)))').remove()

azért kell kétszer futtatni, mert az első törlés hatására keletkez(het)nek olyan nódok, amik nem tartalmaznak többé submenut, tehát újra lesz találat. ha eggyel mélyebb lenne a menü, akkor háromszor kéne futtatni stb.

ha úgy keresel, hogy melyik csomópontok alatt nincs link (pl. úgy azonosítod a nódot, hogy az a .nav-item, ami nem tartalmaz ul-t: ".nav-item:not(:has(>ul)) ), akkor megoldható egy menetben:

$('.nav-item:not(:not(:has(>ul)), :has(.nav-item:not(:has(>ul))))').remove()

ez azokat törli, amik maguk nem linkek, és alattuk sincs link a hierarchiában
Mutasd a teljes hozzászólást!

  • nem teljesen világos, hogy mit óhajtasz, de első körben a szelektorodat kéne úgy megírnod, hogy a számodra szükséges nódokat jelölje ki. ezután nem kell callbackkel bűvészkedni, simán törölheted a kijelölt nódokat így: $(pontos_szelektor).remove(); 
    gyanítom, hogy ezt akarod: $(':has(> .nav-link:not([href ^= "#"]))').remove(); vagyis azokat a nav-item-eket (és nem csak a nav-link-eket) akarod törölni, amelyeken belül a link nem #-kal kezdődik.

    a konzol ablakban egyébként mindig tesztelheted az általad írt szelektort, és akkor látod, hogy az általad elképzelt nódokat címezted-e meg. (a szelektorban használható szintaxist és fícsöröket érdemes megnézni a doksiban)

    második körben az ilyen manipulációt nem ezzel a megközelítéssel kell csinálni, hiszen ha egyszer legeneráltad valahogy (szerver oldalon?) a menüszerkezetet, akkor nem kliens oldalon reszeled tovább. vagy szerver oldalon generáld le az egészet úgy, hogy ne kelljen kliensen már hegeszteni rajta, vagy kliensen generáld le az egészet eleve valamilyen template mechanizmussal. ez a fele így, fele úgy megoldás elég gány, és előbb-utóbb kukázni kell az egészet úgyis.
    Mutasd a teljes hozzászólást!
  • btw amit te írtál, annak megfelelő ez:
    $(':has(>.submenu:not(:has(>*)))').remove()

    azért kell kétszer futtatni, mert az első törlés hatására keletkez(het)nek olyan nódok, amik nem tartalmaznak többé submenut, tehát újra lesz találat. ha eggyel mélyebb lenne a menü, akkor háromszor kéne futtatni stb.

    ha úgy keresel, hogy melyik csomópontok alatt nincs link (pl. úgy azonosítod a nódot, hogy az a .nav-item, ami nem tartalmaz ul-t: ".nav-item:not(:has(>ul)) ), akkor megoldható egy menetben:

    $('.nav-item:not(:not(:has(>ul)), :has(.nav-item:not(:has(>ul))))').remove()

    ez azokat törli, amik maguk nem linkek, és alattuk sincs link a hierarchiában
    Mutasd a teljes hozzászólást!
  • Köszönöm a segítséget!
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd