Here are the links to index.html and main.css files: index.html, main.css
Unfortunately, there seems to be an issue with the code in line 28-30 of index.html:
$(".todo-liste").click(function(){
$(this).parent(".todo-listeEleman").fadeOut(300);
});
When you add todo-listeEleman to todo-liste, you should use .find() instead of .parent() because the element is a child of todo-liste.
$(this).find(".todo-listeEleman").fadeOut(300);
Demo
$(document).ready(function() {
$(".todo-ekle").click(function() {
$(".todo-liste").append("<li class = 'todo-listeEleman'>" + $(".todo-hedef").val() + "</li>")
});
$(".todo-liste").click(function() {
$(this).find(".todo-listeEleman").fadeOut(300);
});
});<title>TO-DO LIST APP</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<div class="root-div" id="root-div">
<h1 class="todo-baslik">TODO LIST</h1>
<input type="text" name="hedef" placeholder="Lütfen hedefini yazın..." class="todo-hedef" id="todo-hedef">
<button class="todo-ekle" id="todo-ekle"> +</button>
<br>
<ul class="todo-liste" id="todo-liste">
</ul>
</div>I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The c ...
I have an HTML template in a console application where I need to send emails using the template. Everything works fine except that the CSS is not being applied to the template. Although I have written the CSS on the same HTML page, it doesn't seem to ...
Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...
Hey there, I'm struggling with a simple HTML issue and could really use some help. I've searched Google and Stack Overflow, but I can't seem to get this to work. I'm attempting to create a basic link in an index.html page that directs t ...
I'm utilizing a v-bind:class binding on a component in order to toggle a css class based on the truthiness of a boolean within my Vue.js component. When I specify this in my template: <aside v-bind:class="{'--opened': sidebarVisible}" ...
Is there a method using JavaScript to determine if the popover is open when utilizing the new popover API? <button popovertarget="pop">Trigger the popover</button> <div popover id="pop">This is the content of the popover!</div> ...
I am working with two arrays in my code: bookingHistory: Booking[] = []; currentBookings: any[] = []; Both arrays are populated later in the code. The bookingHistory array consists of instances of Booking, while currentBookings contains arrays of Booking ...
Currently, everything seems to be working fine. However, I'm unsure about the correct way to call the json data. I attempted using a direct link but it didn't work. Do I need to modify the "data" parameters? I'm confused because I saw that ...
I am encountering an issue on my website where I need to insert an image as a background in a specific table cell. However, the image appears duplicated because it is smaller than the cell's width and height, causing an overlap effect. Even though I ...
Don't forget to showcase all the amazing Tailwind CSS Colors, Sometimes they go missing unexpectedly, and only a few decide to make an appearance. I try to add them manually one by one, but sometimes they just don't show up on the map. Edit: ...
Hey there! I created a small hamburger button for my website, but for some reason, it doesn't show up on Safari iOS. Interestingly, it works perfectly fine on Windows Chrome, Windows Firefox, and my Android device. I've been trying to troubleshoo ...
Check out the code snippet I wrote below: import React from 'react' function OurCourse() { return ( <div className='w-full '> <div className='w-full h-[390px]' style={{ backgroundImage:&apos ...
I have successfully designed a captivating header, and now I am faced with the challenge of randomly placing star-shaped divs throughout it. These stars are implemented as spans with a 'star' class, which is stylized by CSS to create an actual st ...
I'm encountering an issue with my navbar responsiveness as it overflows at smaller screen sizes (sm/xs). https://i.sstatic.net/AgXJO.png Although I used the code from the Bootstrap website, I have made some modifications. Could these changes be caus ...
Currently in the process of building a data dashboard and have hit a roadblock that I can't seem to navigate. Utilizing chart.js for rendering charts and jquery/js for dashboard control, I aim to allow users to add new charts with a simple button clic ...
I am having trouble with this code and I prefer not to use MySQL. My goal is to set up a basic username and password system that redirects users to "process_login.php" if the credentials are correct, otherwise they will be sent to a random site. "& ...
Looking to incorporate an onHover event that triggers when hovering over items in a tag cloud. Below is the code snippet, but it seems there might be a conflict causing it not to work. <html> <head> <title>jQCloud Example&l ...
Creating a code that alerts the user when they have any "unsaved" form in the View Check out this script: import { __ } from "./translation"; export class Unsave { private unsaved: boolean = false; public register(): void { $(":button, ...
I am trying to center align all the contents inside a container with the class "row", but the justify-content-center property doesn't seem to be working. Can you tell me if the justify-content property works on a row? <div class="container my-5"> ...
When dealing with HTML code containing multiple div data, I attempted to extract the text and its values using a jQuery concept. My goal is to organize the code into array structures. <div class="woocommerce"> <div class="addon-blocks" id="ad ...