How To Only Address One Element In A Parent Div

I am working on a simple to-do list and when I click the check box next to the new item, both the text and the delete button gain the strikethrough property. Is there a way for me to make it so that only the text gets the strikethrough, and not the delete button?

I have tried targeting specific children but I am still learning and might have done this wrong. I can't figure out how to only target the text item and not the delete button.

Snippet

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let taskList = document.getElementById('taskList');
let taskBox = document.getElementById('taskBox');
let taskCount = 0;
document.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTask();
}
});
function addTask() {
let taskVal = taskBox.value;
if (taskVal.length < 1) {
window.alert('Task Box Empty');
} else {
let itemDiv = document.createElement('li');
let itemCheck = document.createElement('input');
let textItem = document.createTextNode(taskVal);
let itemDelete = document.createElement('button');
itemDiv.classList.add('itemDiv');
itemCheck.style.height = "50px";
itemCheck.type = "checkbox";
itemCheck.name = "finished";
itemCheck.id = "checkbox";
textItem.innerText = taskVal;
itemDelete.innerText = "x"
taskList.append(itemDiv);
itemDiv.appendChild(itemCheck);
itemDiv.appendChild(textItem);
itemDiv.appendChild(itemDelete);
taskCount++;
itemCheck.onclick = finishTask.bind(itemCheck);
itemDelete.onclick = deleteItem.bind(itemDiv);
document.getElementById('taskBox').innerHTML = "";
taskBox.value = "";
}
}
function finishTask() {
let children = this.parentNode.children;
if (this.checked) {
this.parentNode.style.textDecoration = "line-through";
} else {
this.parentNode.style.textDecoration = "none";
}
}

<!-- language: lang-html -->

<h1>My To-Do List</h1>
<hr>
<div class="addTaskContainer">
<input id="taskBox" type="textarea" placeholder="Add Task" autocomplete="off">
<button class="add" onClick="addTask()">Add Task</button>
</div>
<ul class="taskList" id="taskList"></ul>
<button class="bottomBtn" onClick="clearAll()">Clear All</button>
<button class="bottomBtn" onClick="clearFinished(itemCheck)">Clear Finished</button>

<!-- end snippet -->

The easiest way would be to wrap your text in a span.

First, remove this line

let textItem = document.createTextNode(taskVal);

and replace it with a span

let textItem = document.createElement('span');
textItem.innerText = taskVal;

Then target span your span in parent node.

function finishTask() {
let textNode = this.parentNode.querySelector('span')
if (this.checked) {
textNode.style.textDecoration = 'line-through';
} else {
textNode.style.textDecoration = 'none';
}
// OR simply
//   let textNode = this.parentNode.querySelector('span')
//   textNode.style.textDecoration = this.checked ? 'line-through' : 'none';
}