J'essaie d'ajouter mon bouton de fermeture à mes nouvelles listes lorsque je lance mon bouton addItem, mais il ne semble pas s'imprimer avec chaque nouvel élément poussé dans la liste, le bouton de fermeture est en train de se regrouper. Je suis ...

0
LM17 17 mars 2021 à 05:30

1 réponse

Meilleure réponse

Vous devez mettre à jour le JS pour le bouton de fermeture et pour aligner le bouton de fermeture avec li besoin de mettre à jour CSS.

Correction: vous ajoutez un bouton de fermeture avec une condition incorrecte.

let button = document.getElementById('btn');
let list= document.getElementById('item');


button.addEventListener('click', addItem);

// create a new item when the add button is clicked
function addItem(){
    let li= document.createElement('li');
    let newItem= document.getElementById('input').value;
    let x= document.createTextNode(newItem);
    li.appendChild(x);

    if(newItem == ''){
        alert('You have to write something');
    }else{
        document.getElementById('list').appendChild(li)
    }

// add a close button to each item
    var myNodelist = document.getElementsByTagName("li");
for (let i = 0; i < myNodelist.length; i++) {
// first check if class is already added or not otherwise it will append class again and again
if(myNodelist[i].querySelector('.close') == null) {
var para = document.createElement("span");
  var txt = document.createTextNode("close");
  para.className = "close";
  para.appendChild(txt);
  myNodelist[i].appendChild(para);
}
  
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
for (let i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}
}
*{
    padding: 0;
    margin: 0;
}


@font-face {
    font-family: 'Chango';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/chango/v9/2V0cKI0OB5U7WaJCyHe5.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Mukta';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/mukta/v7/iJWKBXyXfDDVXbnBrXw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

header{
    position: relative;
    text-align: center;
    top: 200px;
}

h1{
    font-size: 50px;
    margin-bottom: 10px;
    font-family: Chango, sans-serif;
    letter-spacing: 2px;
}

h5{
    font-family: Mukta;
    font-size: 15px;
    letter-spacing: 2.5px;
}

#container{
    position: relative;

    text-align: center;
    top: 220px;
    
}

.close {
   
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
  }
  li {
    padding: 12px 16px 12px 16px;
  }
  .close:hover {
    background-color: #f44336;
    color: white;
  }

  ul {
    margin: 0;
    padding: 0;
  }
<header>
        <h1>ToDo List</h1>
        <h5>Add items below</h5>
    </header>

    <div id="container">
        <input type="text" id="input" placeholder="e.g. banana">
        <button id="btn">Add Item</button>
        
        <ul id="list">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square" viewBox="0 0 16 16">
                <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
              </svg>

        </ul>

    </div>
    
0
Dhara 17 mars 2021 à 02:50