JavaScript: 空のアイテムが追加される

お気に入りリストを作成しています。

リストの横にあるハートのアイコンをクリックすると、お気に入りリストに追加され、もう1度クリックすると、リストから外されます（toggle）

おおむね動くようにはなったのですが、アイコンをクリックしていると、たまに空の要素が追加されます。また、削除しようとしたのに空の要素が残ったりします。

if文で「空の時は追加しない」などの処理をしたいのですが、うまく出来ずにいます。
この場合は、どのように対処したらいいのでしょうか、アドバイスを頂けたら幸いです。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Like Button Practice</title>
</head>

<body>

<ul class="list"></ul>
    
<h2>My Favorite Dogs</h2>
<div class="favorite">

</div>

<script>
const data = [
    { 
        "breed": "Beagle",
        "characteristics": "playful" 
    },
    {
        "breed": "Golden Retriever", 
        "characteristics": "calm" 
    },
    {
        "breed": "Corgi", 
        "characteristics": "bright" 
    },
    {
        "breed": "Goldendoodle", 
        "characteristics": "gentle" 
    },
    {
        "breed": "Labrador Retriever", 
        "characteristics": "loyal" 
    },
]

const likes = [];

const $likelist = document.querySelector('.favorite');

const addToLikelist = (el) => {
  likes.push(el);
  renderLikes();
}

const elements = {
    "icon": document.querySelectorAll('svg'),
    "dom": document.querySelector('.list'),
    "favorite": document.querySelector('.favorite')
}

// Render method
function test() {
    data.map(item => {
        renderList(item.breed);
        return item.breed;
    })
};
test();

function renderList(doggo) {
    const markup = `
        <li id="${doggo}">
            <svg class="icon icon-heart-outlined">
                <use xlink:href="icon/sprite.svg#icon-heart-outlined"></use>
            </svg>  
        ${doggo}
        </li>
    `;
    elements.dom.insertAdjacentHTML('beforeend', markup);    
}
    
const likeTemplate = i => `<p>${i}</p>`;

const renderLikes = () =>  {
    $likelist.innerHTML = likes.map(i => likeTemplate(i)).join('');
}

elements.dom.addEventListener('click', e => {
    
   const id = e.target.parentNode.id;
   
   if (e.target.matches('.icon, .icon *')) {

        const index = likes.indexOf(e.target.parentNode.id);    

            // If (Beagle, Golden Retriever... doesn't exist in likes array, it returns -1) 
            if (index === -1) {
                likes.push(id);
                renderLikes();
            } else {
                likes.splice(index, 1);
                renderLikes();
            }
    }
});
</script>
</body>
</html>

m.ts10806

2019/06/03 13:32

インデントがぐっちゃぐちゃなのでお手元のコードをそろえて転記しなおしていただければと。

vankick

2019/06/03 23:27 編集

ご指摘いただきましてありがとうございます。インデントを修正しました！

m.ts10806

2019/06/04 00:03

そういえば「たまに」なんですよね？色々試行されたかと思いますが、現象が起きるときと起きない時の違いとかはありますか？

vankick

2019/06/04 00:07

多分ですが、アイコン部分は<svg><use></use></svg> で記述していますが、クリックのtargetが <svg> として認識された時は const id = e.target.parentNode.id; がちゃんと認識されるのですが、クリックのtargetが <use> として認識された時は、上記のparentNode.idが見つからず、そのため空の要素が追加されてしまうようです。