How can I can make this JavaScript code cleaner?

I’m new to JS and I did this exercise for the course I’m taking. It’s basically done, but I had to repeat the code that creates the "delete" button and I’m not sure how I can make this cleaner.

var button = document.getElementById("add")
var input = document.getElementById("userinput")
var ul = document.querySelector("ul")
var li = document.querySelectorAll("li")

function inputLength() {
    return input.value.length;
}

function createListElement() {
    let li = document.createElement("li")
    li.appendChild(document.createTextNode(input.value))
    ul.appendChild(li)
    input.value = ""

    // Create a delete button and configure it:
    var btnDelete = document.createElement("button");
    btnDelete.classList.add("delete");
    btnDelete.textContent = "Delete";

    // Append the button to the list item
    li.appendChild(btnDelete);
}

// Create a delete button for each <li> already in the HTML file
li.forEach(function(item){
    var btnDelete = document.createElement("button");
    btnDelete.classList.add("delete");
    btnDelete.textContent = "Delete";
    item.appendChild(btnDelete);
 });

function addListAfterClick() {
    if(inputLength() > 0) {
        createListElement()
    }
}

function addListAfterKeypress(event) {
    if(inputLength() > 0 && event.keyCode === 13) {
        createListElement()
    }
}

button.addEventListener("click", addListAfterClick)

input.addEventListener("keypress", addListAfterKeypress)


function toggleClassDoneOnAndOff(event) {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("done");
    }
}

ul.addEventListener("click", toggleClassDoneOnAndOff);

function deleteAfterClick(event) {
    // Determine if it was a delete button that was clicked
    if(event.target.classList.contains("delete")){
      // Remove the closest li ancestor to the clicked element
      event.target.closest("li").remove();
    }
  
  }

// Handle all the clicks that originate from within the <ul> at
// the <ul> level when they bubble up to it instead of setting each
// button within the <ul> up with its own click event handler.
ul.addEventListener("click", deleteAfterClick);
.done {
    text-decoration: line-through;
}
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="Add items">
    <button id="add">Add</button>
    <ul id="ul">
        <li>Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>

My question is that simple, but since Stack Overflow is telling me to "add some more details"…

Basically, I tried to turn this part into a function:

var btnDelete = document.createElement("button");
btnDelete.classList.add("delete");
btnDelete.textContent = "Delete";

But I couldn’t figure out how to make it work inside the other ones.

80 thoughts on “How can I can make this JavaScript code cleaner?”

  1. I got this website from my buddy who informed me
    regarding this website and now this time I am visiting this website and reading very informative articles at this
    place.

    Reply
  2. I’m really inspired along with your writing abilities as well as with the structure to your
    weblog. Is this a paid theme or did you customize
    it yourself? Either way stay up the nice quality writing,
    it’s uncommon to look a nice blog like this one these days..

    Reply
  3. It’s a shame you don’t have a donate button! I’d without
    a doubt donate to this outstanding blog! I guess for now i’ll settle for
    book-marking and adding your RSS feed to my Google account.
    I look forward to new updates and will talk about this site
    with my Facebook group. Chat soon!

    Reply
  4. We stumbled over here by a different web address
    and thought I should check things out. I like what I see
    so now i’m following you. Look forward to looking into your web page yet
    again.

    Reply
  5. I’m really loving the theme/design of your blog.
    Do you ever run into any browser compatibility problems?
    A couple of my blog visitors have complained about my website not working correctly
    in Explorer but looks great in Chrome. Do you have any suggestions to help
    fix this issue? scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

    Reply

Leave a Comment