Как удалить элементы списка из родительского элемента с помощью vanilla JS, используя метод remove? - PullRequest
Новая
       12

Как удалить элементы списка из родительского элемента с помощью vanilla JS, используя метод remove?

0 голосов
/ 20 июня 2019

Предупреждение: мой код JavaScript выглядит грязно. Я все еще должен модулировать это немного больше

Я пытаюсь удалить элементы списка из родительского узла, которые были когда-то добавлены функцией addPhraseToDisplay . Код, который я использовал для этого, закомментирован в buttonElement.innerHTML = "Start Over" , поэтому увеличьте масштаб этой области кода до , сохраните время. 

let missed=0;
const qwertyID=document.getElementById('qwerty');
const phraseID=document.getElementById('phrase');
const buttonElement=document.getElementsByClassName("btn__reset")[0];
const overLay=document.getElementById('overlay');
const phraseArray=["Hey man","This is weird","I am bored","That is nice","That is cool"];
const ul=document.getElementsByTagName('UL')[0];
const heading=document.querySelector('.title');


//picks random phrase from phraseArray,breaks phrase into character array
//returns arr---character array to be displayed
function getRandomPhraseAsArray(array) {
    index = Math.floor((Math.random() * array.length))
    let str=array[index];
    let arr=[...str];
    console.log(arr);
    return arr;
}

//appends each character as list items in ul
//takes arr in parameter
function addPhraseToDisplay(characterArray) {
    for (let i=0; i<characterArray.length; i+=1) {
        let char=characterArray[i];
        listItem=document.createElement('LI');
        listItem.textContent=char;
        if (char!==" ") { //make code cleaner
            listItem.classList.add("letter");
        }
        ul.appendChild(listItem);   
    }
}

//takes button as parameter and checks its letter
//checks letter class name in list, checks for match, and adds class show
function checkLetter(buttonKey) {
    buttonText=buttonKey.textContent;
    lettersList=document.getElementsByClassName('letter');
    let match=null;
    for (let i=0;i<lettersList.length;i+=1) {
        if (lettersList[i].textContent.toLowerCase()===buttonText) {
            lettersList[i].classList.add("show");
            match=true;
        } 
    }
    return match;
}

//compares number of letter classes with show classes and checks missed variable
function checkWin () {
    letterClassLength=document.getElementsByClassName('letter').length;
    showClassLength=document.getElementsByClassName('show').length;
    if (letterClassLength===showClassLength) {
        overLay.classList.add("win");
        heading.innerHTML="You win!";
        overLay.style.display="flex";
        buttons=document.querySelectorAll('.keyrow button'); //repeated code
        for (let i=0; i<buttons.length;i+=1) {
            buttons[i].disabled=false;
        }
    } else if (missed>=5) {
        overLay.classList.add("lose");
        heading.innerHTML="You lose!";
        overLay.style.display="flex";
        buttons=document.querySelectorAll('.keyrow button'); //repeated code
        for (let i=0; i<buttons.length;i+=1) {
            buttons[i].disabled=false;
        }
    }
    buttonElement.innerHTML="Start Over";
    buttonElement.addEventListener('click', ()=> {
        overLay.style.display="none";
        chosen=document.getElementsByClassName('chosen');
        show=document.getElementsByClassName('show');
        // list_items=document.querySelectorAll('letter');
        for (let i=0; i<chosen.length;i+=1) {
            chosen[i].classList.remove('chosen');
        }
        for (let i=0; i<show.length;i+=1) {
            show[i].classList.remove('show');
        }
        // for (let i=0; i<list_items.length;i+=1) {
        // ul.remove(list_items[i]);
        // }
        phraseDisplayed=getRandomPhraseAsArray(phraseArray);
        addPhraseToDisplay(phraseDisplayed);
    });
}

//listener event to button to hide overlay
buttonElement.addEventListener('click', ()=> {
    overLay.style.display="none";
});


//stores arr (character array) from function into variable 
//inputs variable (character array) into new function
let phraseDisplayed=getRandomPhraseAsArray(phraseArray);
addPhraseToDisplay(phraseDisplayed);


//adds class chosen to key and disables it
//if button pressed did not match, remove one try from scoreboard and update missed 
qwertyID.addEventListener('click', (e)=>{
    let button=e.target;
    button.classList.add("chosen");
    button.disabled="true";
    let letterFound=checkLetter(button);
    ol=document.getElementsByTagName('OL')[0];
    tries=document.getElementsByClassName('tries')[0];
    if (letterFound==null) {
        ol.removeChild(tries);
        missed+=1;
    }
    checkWin();
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Wheel of Success!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="main-container">

      <div id="overlay" class="start">
        <h2 class="title">Wheel of Success</h2>
        <a class="btn__reset">Start Game</a>
      </div>

      <div id="banner" class="section">
        <h2 class="header">Wheel of Success</h2>
      </div>

      <div id="phrase" class="section">
        <ul></ul>
      </div>
      <div id="qwerty" class="section">
        <div class="keyrow">
          <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button>
        </div>
        <div class="keyrow">
          <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button>
        </div>
        <div class="keyrow">
          <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button>
        </div>
      </div>

      <div id="scoreboard" class="section">
        <ol>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
        </ol>
      </div>
    </div>
  </body>
  <script src="app.js"></script>
</html>

Я пытался использовать метод удаления, но это не сработало. Вместо этого он добавлял больше элементов списка, чем необходимо, после перезапуска игры. Я не использовал это должным образом? Должен ли я сделать что-то другое?

Я знаю, что есть более простой способ перезапустить программу, но я должен вручную перезапустить соответствующие переменные в соответствии с инструкциями для этого проекта, поэтому я не могу использовать методы быстрого доступа для перезагрузки страницы.

...