I have been attempting to figure out how to select a delete icon within my personal web application. delectIcon
HTML
<main>
<div class="container">
<div class="tabs">
<a href=""><p><span class="active">Newest</span></p></a><a href=""><p>
<span>Oldest</span></p></a><a href=""><p><span>Add</span></p></a>
</div>
<div class="content">
<ul>
<li>
<span class="itemLeft">Answer emails</span>
<span class="itemMiddle">12-31-2016</span>
<span class="itemRight">1</span>
<b class="deleteIcon"> X </b>
</li>
<li>
<span class="itemLeft">Prep for Monday's class</span>
<span class="itemMiddle">12-31-2016</span>
<span class="itemRight">5</span>
<b class="deleteIcon"> X </b>
</li>
</ul>
</div>
</div>
</main>
JavaScript
$(".deleteIcon").on("click", function () {
alert("Oh, clicked!");
return false;
});
Despite my attempts to manually write the code, I wasn't successful in selecting the delete icon. Subsequently, I utilized Chrome Web Developer Tool to locate the CSS path. Experimenting with both XPath (
$"[/html/body/main/div/div[2]/ul/li[ 1 ]/b]"$"(pathbody > main > div > div.content > ul > li:nth-child(1) > b)"My efforts to apply an ID to mark only one "li" element as existent worked perfectly with the CSS selector. However, clicking on the deleteIcon ($"(#deleteIcon)") yielded no results.
#deleteIcon{
float:right;
font-weight: bold;
padding: 0 3px 0 3px;
border-radius: 5px;
background: #ccc;
cursor: pointer;
margin-left: 5px;
font-size: 1.3em;
text-align: center;
}
Another attempt was made to select the title. It was found that the following code snippet functioned properly:
$(".container h1").on("click", function () {
alert("Oh, no!");
return false;
});
I am now uncertain about what steps to take next. Any assistance would be greatly appreciated!
Thank you! I warmly welcome any insights or solutions you may provide regarding my query.
Adding more details:
As a matter of fact, I added the deleteIcon into the HTML through JavaScript. I wonder if this action has affected my selector.
Actual HTML
<main>
<div class="container">
<div class="tabs">
<a href=""><p><span class="active">Newest</span></p></a><a href=""><p>
<span>Oldest</span></p></a><a href=""><p><span>Add</span></p></a>
</div>
<div class="content">
</div>
</div>
</main>
JavaScript (The important part listed below)
function Item(name,dueDate,type){
this.name=name;//1
this.dueDate=dueDate;//input2
this.type=type;//3
};
$(".tabs a span").toArray().forEach(function (element) {
var $element = $(element);
// create a click handler for this element
$element.on("click", function () {
var $content,
$input,
$button,
i;
if ($element.parent().parent().is(":nth-child(1)")) {
// newest first, so we have to go through
// the array backwards
$content = $("<ul>");
for (i = Task.length-1; i >= 1; i--) {
// $buttondelete = $("<buttonDelete>").text("X");
var txt1 = Task[i].toStringName();
var txt2 = Task[i].toStringDate();
var txt3 = Task[i].toStringType();
//alert(txt3);
$content.append('<li> <span class="itemLeft">'+txt1+'</span> <span class="itemMiddle">'+txt2+'</span> <span class="itemRight">'+txt3+'</span><b class="deleteIcon"> X </b>');
}
}
$("main .content").append($content);
return false;
});
});