Removing jQuery from TodoMVC's edit Method

Exercise

I'm going through the exercise of removing jQuery from TodoMVC's jQuery example. My strategy is to first remove it from the core methods like create, destroy, toggleAll, renderFooter, edit, etc. 

I will then remove it from the bindEvents method.

Today I removed jQuery from the edit method. I should note that there is one place where jQuery is still touching the edit method: edit takes an argument e which is a jQuery event. I've left this as is until I get to removing jQuery from the bindEvents method.

Here's what the edit method looks like with jQuery:

edit: function (e) {
  var $input = $(e.target).closest('li').addClass('editing').find('.edit');
  $input.val($input.val()).focus();
}

We can break out the chain of function calls into these steps:

// 1. Get the dblclicked element (should be a <label>)

// 2. Get the <li> it belongs to (look up the ancestor tree.)

// 3. Add class 'editing' to the <li> for styling.

// 4. Find a child of <li> with selector '.edit' (should be an <input>).

// 5. Save that <input> as var input.

// 6. Apply focus to input

Then we can fill in the steps with the vanilla JS equivalents.

// Get the dblclicked element (should be a <label>)
var element = e.target;

// Get the <li> it belongs to (look up the ancestor tree.)
var li = element.closest('li');

// Add class 'editing' to the <li> for styling.
li.classList.add('editing');

// Find a child of <li> with selector '.edit' (should be an <input>).
// Save that <input> as var input.
var input = li.querySelector('.edit');

// Note: The old code set input.value to input.value()
// I don't see the purpose of this, and works without it,
// so I've removed it.

// Apply focus to input.
input.focus();

Things I'm unsure about

1. The old code set input.value to input.value(). I don't see the purpose of this, and works without it, so I've removed it. If you see a reason why this needs to be there, please let me know in the comments.

2. The code has gotten quite a bit longer. Should I consider doing some chaining in order to shorten it? Instead I optimized for readability by breaking each step into it's own line (and adding comments.)

This is an exercise from Watch and Code's Premium course. Please head over there if you'd like to improve your Javascript skills.