NEED HELP! DIRECTIONS: Convert the deleteItemInList.js from pure JavaScript to j

Question

NEED HELP!

DIRECTIONS: Convert the deleteItemInList.js from pure JavaScript to jQuery.

"use strict"

window.onload = function (){

var itemValue = 0;

var errorMessage = "You need to enter something";

var add = document.getElementById("add");

add.onclick = function()

{

var itemArea = document.getElementById("item");

itemValue = itemArea.value;

if(itemValue == "")

{

var span = document.getElementById("error");

span.innerText = errorMessage;

}

else{

var li = document.createElement("li");

var button = document.createElement("button");

button.innerText = "x";

var textNode = document.createTextNode(" " + itemValue);

var ul = document.getElementById("list");

li.append(button);

li.append(textNode);

ul.append(li);

button.onclick = deleteItem;

}

}

var clear = document.getElementById("clear");

clear.onclick = function(){

var itemArea = document.getElementById("item");

itemArea.value = "";

var span = document.getElementById("error");

span.innerText ="";

var list = document.getElementById("list");

list.innerText ="";

}.

function deleteItem()

{

var liParentOfButton = this.parentElement;

console.log(liParentOfButton);

var ulParentOfLi = liParentOfButton.parentElement;

console.log(ulParentOfLi);

ulParentOfLi.removeChild(liParentOfButton);

}

}

Explanation / Answer

The JQuery provides a simpler way to the Javascript which reduces the lots of Javascript code to lesser. So, JQuery is much less in size, It is a plugin you need to import the JQuery plugin in head section with script tag to execute. By the was the JQuery is a part of Javascript not different.

The solution for the Task is:

"use strict"; // incase if you want strict mode

$('document').ready(function(){ // The function that is equal to the window.onload()

var itemValue=0;

var errorMessage = "You need to enter something"; //$() is used to find the element by selector tag //similar to CSS

$('#add').click(function(){ // Directly adds click event to the item with add as ID

itemValue = $('#item').val(); //Directly gives the item value with the help of id selector

if(itemValue == "")

{

$('#error').text(errorMessage); //sets the text to id tag

}

else{

var button = $('<button></button>').addclass('btnclk'); // add button

button.text("x"); //Adds text to button

$('li').add(button); // you can use the append() also

var textNode = document.createTextNode(" " + itemValue);

var ul = $("list");

$('li').add(textNode);

ul.append(li);

$('.btnclk').click(function(){ deleteItem(); });

}

})

$('#clear').click(function(){

$('#item').val="";

$('#error').text("");

$('#list').text("");

})

function deleteItem(){

var liParentOfButton = this.parent();

console.log(liParentOfButton);

var ulParentOfLi = liParentOfButton.parent();

console.log(ulParentOfLi);

ulParentOfLi.remove(liParentOfButton);

}

The code had been modified to fit for you as like as JQuery. I had triedmy level best if you have any queries please try to comment I will respond as soon as possible.

Related Questions

Navigate

• Browse (All)
• Browse N
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.