javascript getElementById on span

Question

I have a row of results: name, amount and I want to add a X at the end of the row allowing deletion of the entire row.

I gave only one row here, for brievity. There are many and I though of putting this in a for.

This is my html :

let lignesRecurrentes = document.getElementsByClassName('ligne_recurrente')

for (var i = 0; i < lignesRecurrentes.length; i++) {
    let ligneRecurrente = lignesRecurrentes[i]
    let id = ligneRecurrente.id.replace('ligne_','')
    let croix = document.getElementById('suppr_recurrente_'+id)

    croix.addEventListener('click', function(){
  console.log(croix.innerHTML)
  }
  )}

        <div class="ligne_recurrente" id="ligne_3">
            <span class="intitule" id="intitulerec_3">Cousteau</span>
            <span class="montant">
                <span class="chiffre_recur" id="montant_3">396,00</span>
                <span class="euro">&#8364;</span>
                <span id="suppr_recurrente_3 " >&nbsp;X</span>
            </span>
        </div>
        <div id="smalrec_3"></div>

How come croix is null? Can't add eventListerner on null?

First, when are you trying to run that JavaScript? It must be after the HTML has been created and parsed into memory. Second, [don't use `getElementsByClassName()` (especially for looping purposes)](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474). — Scott Marcus, Feb 05 '21 at 13:41
Typo: The `id` attribute has whitespace at the end. This would have been picked up if you had [validated](https://validator.nu/) — Quentin, Feb 05 '21 at 13:42
And, you really don't need `id`s or that loop in the first place. All you need to do is have a `click` event handler on the `span` that does this one line: `this.closest(".ligne_recurrente").remove();`. — Scott Marcus, Feb 05 '21 at 13:43

score 1 · Accepted Answer · answered Feb 05 '21 at 14:01

This is caused by trailing space in id="suppr_recurrente_3 "

BTW, You can simplyfiy your js with wrapping rows into some div

        <div class="rows">
          <div class="ligne_recurrente" id="ligne_3">
              <span class="intitule" id="intitulerec_3">Cousteau</span>
              <span class="montant">
                  <span class="chiffre_recur" id="montant_3">396,00</span>
                  <span class="euro">&#8364;</span>
                  <span class="btn-remove">&nbsp;X</span>
              </span>
          </div>
          <div id="smalrec_3"></div>
        </div>

attach listener do this container and check if clicked element has desired class:

document.querySelector('.rows').addEventListener('click', function(e) {
    var target = e.target, id;

    if (target.classList.contains('btn-remove')) {
        id = target.parentElement.parentElement.id.replace('ligne_', '');

        console.log('line ' + id + ' should be removed');
    }
});

gaetanoM · Answer 2 · 2021-02-05T14:30:55.313

You can simply your code combing:

In order to remove the entire row it's enough to use .remove() in the event handler.

The snippet:

document.querySelectorAll('.ligne_recurrente span span:last-child').forEach(function(ele) {
    ele.addEventListener('click', function(e){
        this.closest('div.ligne_recurrente').remove();
    });
})

<div class="ligne_recurrente" id="ligne_3">
    <span class="intitule" id="intitulerec_3">Cousteau</span>
            <span class="montant">
                <span class="chiffre_recur" id="montant_3">396,00</span>
                <span class="euro">&#8364;</span>
                <span id="suppr_recurrente_3" >&nbsp;X</span>
            </span>
</div>
<div id="smalrec_3"></div>

javascript getElementById on span

2 Answers2