<Li> elementlarni boladagi ma'lumotlar attributiga asoslang

Menda quyidagi HTML mavjud:

  • <div class="abc">John</div>
  • 
    
  • <div class="abc">Maria</div>
  • 
    
  • <div class="abc">Peter</div>
  •  
    

    data-test = "male" = jQuery holda ikkita

  • kodini butunlay olib tashlash yoki yashirishni istayman. Har qanday yordam/taklif yordam beradi.
  • 3
    Muammoingiz bir necha subproblemlarga bo'linishi mumkin: 1. a = a = a bilan a toping. 2. Topilgan to'plamdagi har a uchun. 3. closest yuqori li ni toping. 4. Va uni olib tashlang. Ushbu kichik muammolarning har biri Internet va StackOverflow-da bir necha marta so'ralgan.
    qo'shib qo'ydi muallif Yeldar Kurmangaliyev, manba
    JQuery-dan foydalanasizmi?
    qo'shib qo'ydi muallif Jeremie, manba
    JQuery-dan foydalanasizmi?
    qo'shib qo'ydi muallif Jeremie, manba
    Yeldarga minnatdorman, hatto o'sha qadam tavsifi juda ko'p yordam beradi, chunki men javascriptda yangi. Buni jquery-da qildim, lekin to'g'ri javascriptda men butunlay yo'qolganman.
    qo'shib qo'ydi muallif Greg Greg, manba

    8 javoblar

    CSS tanlovchilarining quvvatidan foydalanishingiz mumkin:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    [].forEach.call(document.querySelectorAll('li a[data-test="male"]'), function(el) {
      el.parentNode.parentNode.remove();
    });
    
    
  • <div class="abc">John</div>
  •  
    
  • <div class="abc">Maria</div>
  •  
    
  • <div class="abc">Peter</div>
  •  
    </div> </div>

    Foydalanilgan APIlar:

    3
    qo'shib qo'ydi

    CSS tanlovchilarining quvvatidan foydalanishingiz mumkin:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    [].forEach.call(document.querySelectorAll('li a[data-test="male"]'), function(el) {
      el.parentNode.parentNode.remove();
    });
    
    
  • <div class="abc">John</div>
  •  
    
  • <div class="abc">Maria</div>
  •  
    
  • <div class="abc">Peter</div>
  •  
    </div> </div>

    Foydalanilgan APIlar:

    3
    qo'shib qo'ydi

    Ushbu kod eski brauzerlarda ham ishlashi kerak

    var els = document.getElementsByClassName('abc');
    for (var i=0; i< els.length; i++){
        if (els[i].firstChild.getAttribute('data-test') === 'male') {
            els[i].parentNode.parentNode.removeChild(els[i].parentNode);
        }
    }
    
    0
    qo'shib qo'ydi

    Ushbu kod eski brauzerlarda ham ishlashi kerak

    var els = document.getElementsByClassName('abc');
    for (var i=0; i< els.length; i++){
        if (els[i].firstChild.getAttribute('data-test') === 'male') {
            els[i].parentNode.parentNode.removeChild(els[i].parentNode);
        }
    }
    
    0
    qo'shib qo'ydi

    Siz Element.closest .

    Element.closest() usuli, eng yaqin ota-boboini qaytaradi   Joriy element (yoki joriy elementning o'zi)   parametrlar bo'yicha berilgan tanlovchilar. Agar shunday ajdod bo'lmasa, u   null qaytaradi.

    Bu hali eksperimental bo'lishi uchun brauzerni qo'llab-quvvatlashini tekshirib ko'ring. bu yerda va bu javobda quyida berilgan polifillat.

    Qanday ishlatish:

    var el = element.closest(<[css selector]>);
    

    Kod parchasi:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    (function() {
      var selectors = document.querySelectorAll('[data-test=male]'),
        i = 0,
        len = selectors.length;
    
      for (i, len; i < len; i++) {
        var current = selectors[i];
        current.closest('li').remove();
      }
    })();
    
    
  • <div class="abc">John</div>
  •  
    
  • <div class="abc">Maria</div>
  •  
    
  • <div class="abc">Peter</div>
  •  
    </div> </div>


    Buni qo'llab-quvvatlamaydigan brauzerlar uchun MDN tomonidan taqdim etilgan quyidagi polifillashdan foydalanishingiz mumkin:

    if (window.Element && !Element.prototype.closest) {
        Element.prototype.closest = 
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i,
                el = this;
            do {
                i = matches.length;
                while (--i >= 0 && matches.item(i) !== el) {};
            } while ((i < 0) && (el = el.parentElement)); 
            return el;
        };
    }
    
    0
    qo'shib qo'ydi

    Siz Element.closest .

    Element.closest() usuli, eng yaqin ota-boboini qaytaradi   Joriy element (yoki joriy elementning o'zi)   parametrlar bo'yicha berilgan tanlovchilar. Agar shunday ajdod bo'lmasa, u   null qaytaradi.

    Bu hali eksperimental bo'lishi uchun brauzerni qo'llab-quvvatlashini tekshirib ko'ring. bu yerda va bu javobda quyida berilgan polifillat.

    Qanday ishlatish:

    var el = element.closest(<[css selector]>);
    

    Kod parchasi:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    (function() {
      var selectors = document.querySelectorAll('[data-test=male]'),
        i = 0,
        len = selectors.length;
    
      for (i, len; i < len; i++) {
        var current = selectors[i];
        current.closest('li').remove();
      }
    })();
    
    
  • <div class="abc">John</div>
  •  
    
  • <div class="abc">Maria</div>
  •  
    
  • <div class="abc">Peter</div>
  •  
    </div> </div>


    Buni qo'llab-quvvatlamaydigan brauzerlar uchun MDN tomonidan taqdim etilgan quyidagi polifillashdan foydalanishingiz mumkin:

    if (window.Element && !Element.prototype.closest) {
        Element.prototype.closest = 
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i,
                el = this;
            do {
                i = matches.length;
                while (--i >= 0 && matches.item(i) !== el) {};
            } while ((i < 0) && (el = el.parentElement)); 
            return el;
        };
    }
    
    0
    qo'shib qo'ydi

    Agar siz brauzerni maqsad qilib qo'ysangiz, barcha querySelector qo'llab-quvvatlaydi. Siz foydalanishingiz mumkin

    {parentDom}.querySelector('a[data-test="male"]').parentNode.parentNode
    

    kerakli li ni topish uchun.

    Hujjatlar bilan bog'liq:

    1. so'rovlarSelektori
    2. parentNode
    0
    qo'shib qo'ydi
    Bu faqat birinchisini topadi. Yaxshiyamki, uni topgandan keyin, uni qanday qilib olib tashlashim mumkin?
    qo'shib qo'ydi muallif user663031, manba
    Men sizning savolingiz haqida kamroq o'ylayman. va @Siah'ın javob yanada to'g'ri.
    qo'shib qo'ydi muallif shuizhongyuemin, manba

    Agar siz brauzerni maqsad qilib qo'ysangiz, barcha querySelector qo'llab-quvvatlaydi. Siz foydalanishingiz mumkin

    {parentDom}.querySelector('a[data-test="male"]').parentNode.parentNode
    

    kerakli li ni topish uchun.

    Hujjatlar bilan bog'liq:

    1. so'rovlarSelektori
    2. parentNode
    0
    qo'shib qo'ydi
    Bu faqat birinchisini topadi. Yaxshiyamki, uni topgandan keyin, uni qanday qilib olib tashlashim mumkin?
    qo'shib qo'ydi muallif user663031, manba
    Men sizning savolingiz haqida kamroq o'ylayman. va @Siah'ın javob yanada to'g'ri.
    qo'shib qo'ydi muallif shuizhongyuemin, manba
    Javascript UZB
    Javascript UZB
    99 ishtirokchilar

    @js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb