CODEWITHSUNDEEP
javascript
user16846263
user16846263

Reputation: 53

How can I remove the input value?

I want to be able to remove the input value but the following code in js does not work:

delette.addEventListener('click', ()=>{
  delette.remove();
})

html code

 <body>
        <div class="container">
            <div class="bg-image"></div>
            <h2 class="heading">Einkaufsliste</h2>
            <input type="text" placeholder="Materialien" onfocus="this.value=''" class="input-materialien">
            <button type="button" class="button">Hinzufügen</button>
            <div class="saved-list"></div>
            
            <a href="#" id = close>
                <i class = "fas fa-times"></i>
            </a>
        </div>
        <script src="funktion.js"></script>
    </body>

JS code

const input = document.querySelector('.input-materialien')
const list = document.querySelector('.saved-list')
const button = document.querySelector('.button')
const delette = document.getElementById('close')


button.addEventListener('click', ()=>{
    list.appendChild(delette)
    list.innerHTML = list.innerHTML + input.value;
    list.appendChild(document.createElement('br'))
})

delette.addEventListener('click', ()=>{
  delette.remove();
})

Upvotes: 1

Views: 214

Answers (2)

54ka
54ka

Reputation: 3589

I hope I understood the task correctly.

Each time you create a new record, you must close the text and the delete button in a packaging element. This makes it much easier to delete the record by selecting the packaging element.

Each time you create a new record, you must place a listener on the item to be deleted. When clicked, it calls the "removeElement()" function which takes the parent element and removes it.

Example:

const input = document.querySelector('.input-materialien');
const list = document.querySelector('.saved-list');
const button = document.querySelector('.button');

button.addEventListener('click', () => {
    // Create elements DIV and SPAN
    // DIV is wrapped element
    // SPAN is delete element
    var div = document.createElement('div');
    var span = document.createElement('span');
    // Get Input Value
    var txt = document.createTextNode(input.value);

    span.innerHTML = '<i class="fas fa-times">x</i>';

    div.appendChild(span);
    div.appendChild(txt);

    list.appendChild(div);

    // Remove value from input
    input.value = '';

    // Add event listner to 'SPAN' element
    span.addEventListener('click', function () {
        removeElement(this);
    });
});

function removeElement(x) {
    x.parentNode.remove();
}
span {
    color: red;
    padding-right: 5px;
    cursor: pointer;
}
<div class="container">
    <div class="bg-image"></div>
    <h2 class="heading">Einkaufsliste</h2>

    <input type="text" placeholder="Materialien" onfocus="this.value=''" class="input-materialien">
    <button type="button" class="button">Hinzufügen</button>

    <div class="saved-list"></div>
</div>

Upvotes: 1

miroslav licko
miroslav licko

Reputation: 81

JS code

    const input = document.querySelector('.input-materialien')
    const list = document.querySelector('.saved-list')
    const button = document.querySelector('.button')
    const delette = document.getElementById('close')
    
    button.addEventListener('click', () => {

      let cln = delette.cloneNode(true);
      cln.innerHTML += input.value + '<br/>';
      list.appendChild(cln);

      cln.addEventListener('click', () => {
        cln.remove();
      })
      
      // an alternative to above "+ '<br/>'"
      // cln.appendChild(document.createElement('br'))
      
    })


    (function() {
    
        const input = document.querySelector('.input-materialien')
        const list = document.querySelector('.saved-list')
        const button = document.querySelector('.button')
        const delette = document.getElementById('close')
        
        button.addEventListener('click', () => {

          let cln = delette.cloneNode(true);
          cln.innerHTML += input.value + '<br/>';
          list.appendChild(cln);

          cln.addEventListener('click', () => {
            cln.remove();
          })
          
          // an alternative to above "+ '<br/>'"
          // cln.appendChild(document.createElement('br'))
          
        })

    })();
<body>
  <div class="container">
    <div class="bg-image"></div>
    <h2 class="heading">Einkaufsliste</h2>
    <input type="text" placeholder="Materialien" onfocus="this.value=''" class="input-materialien">
    <button type="button" class="button">Hinzufügen</button>
    <div class="saved-list"></div>

    <a href="#" id="close">
      <i class="fas fa-times"><span></span></i>
    </a>
  </div>
  <script src="funktion.js"></script>
</body>

Upvotes: 0

Related Questions