We Keep Coding

DOM traversal - Siblings is not selected when editing element - JavaScript

When I use below code, the console.log in edit element function gives me #text but when I wrap the buttons in the div, container in the add element function and use e.target.parentElement.previousElementSibling. In this case it works fine, but I don't want to use wrap.
My goal is just to select the <p class="title">{todoInput.value}</p> when editing
function editItem(e) {
const item = e.target;
let element = e.target.previousElementSibling;
console.log(element, "element");
todoInput.value = element.innerHTML;
}
function addItem(event) {
event.preventDefault();
const value = todoInput.value;
if (value !== "") {
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
todoDiv.innerHTML = `<p class="title">${todoInput.value}</p><button type="button" class="completeBtn">
<i class="fas fa-check"></i>
</button>
<!-- delete btn -->
<button type="button" class="trashbtn">
<i class="fas fa-trash"></i></button>
<button type="button" class="editBtn">
<i class="fas fa-edit"></i>
</button>`;
<div class="todo-container">
<div class="todo-list"></div>
<button class="clear-btn">Clear Items</button>
</div>
I am getting #text in console.log. Any idea?
const todoList = document.querySelector('.todo-list');
function addItem(event) {
event.preventDefault();
const value = todoInput.value;
if (value !== "") {
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
todoDiv.innerHTML = `<p class="title">${todoInput.value}</p>
<button type="button" class="completeBtn">
<i class="fas fa-check"></i>
</button>
<!-- delete btn -->
<button type="button" class="trashbtn">
<i class="fas fa-trash"></i></button>
<button type="button" class="editBtn">
<i class="fas fa-edit"></i>
</button>`;
todoList.appendChild(todoDiv);
}
//event listeners
todoBtn.addEventListener("click", addItem);
todoList.addEventListener('click', editItem);
function editItem(e) {
const item = e.target;
let element = e.target.previousSibling;
console.log(element, "element");
todoInput.value = element.innerHTML;
}
<div class="todo-container">
<div class="todo-list"></div>
<button class="clear-btn">Clear Items</button>
</div>

Unable to target and remove appended element in jquery or Javascript

Here's what I'm trying to do here -
Take input from a form field and append the data in a div option-badges
The badges have X button that I'm using to remove the items clicked if needed
What's the problem?
With the code I've written, I'm unable to remove the said appended badge while I'm easily able to remove the badges which were there already.
Here's the code. Please help me with this. Thanking in anticipation.
$(document).ready(function() {
//take input data from first input field and display comma separated in second field
let dataList = [];
let dataString = "";
$("#addData").on('click', function() {
let data = $("#firstInput").val();
let dataBadge = '<span class="badge badge-secondary" style="margin-left: 5px;">' +
data + ' &nbsp <i id="newBadge" class="fa-solid fa-xmark" ></i></span>';
$('.option-badges').append(dataBadge);
$("#firstInput").val('');
})
//remove badge on clicking x
$(".option-badges > span > i").on("click", function() {
$(this).parent().remove();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<div class="option-badges">
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
</div>
-

Try with on off click like
$(document).off('click', '.option-badges > span > i');
$(document).on('click', '.option-badges > span > i', function () {
$(this).parent().remove();
})
$(document).ready(function() {
//take input data from first input field and display comma separated in second field
let dataList = [];
let dataString = "";
$("#addData").on('click', function() {
let data = $("#firstInput").val();
let dataBadge = '<span class="badge badge-secondary" style="margin-left: 5px;">' +
data + ' &nbsp <i id="newBadge" class="fa-solid fa-xmark" ></i></span>';
$('.option-badges').append(dataBadge);
$("#firstInput").val('');
})
//remove badge on clicking x
$(document).off('click', '.option-badges > span > i');
$(document).on('click', '.option-badges > span > i', function () {
$(this).parent().remove();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<div class="option-badges">
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
<span class="badge badge-secondary" style="margin-left: 5px;">data <i class="fa-solid fa-xmark"></i></span>
</div>
<input id="firstInput" type text />
<a id="addData">ADD </a>

problem in #click event which adding one more fontawesome icon

i tried to make responsive navigation with vue js, when i tried to add '#click' to toggle burger bar or close icon, but it's adding the 'close' icon instead every time i click it.
here's the code
template section
<template>
// ----
<button #click="toggleButton">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="!toggleClose" class="fas fa-times"></i>
</button>
// ----
</template>
script section
<script>
export default {
name: "MultiNav",
data: function() {
return {
toggle: false,
toggleClose: true
};
},
methods: {
toggleButton() {
this.toggle = !this.toggle;
this.toggleClose = !this.toggleClose;
}
}
};
</script>
pict :
i try to use :
<button #click="toggle = ! toggle">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="toggle" class="fas fa-times"></i>
</button>
it still resulting the same result

You need to add a key to the icons.
<button #click="toggle = ! toggle">
<i v-if="!toggle" key="bars" class="fas fa-bars"></i>
<i v-if="toggle" key="times" class="fas fa-times"></i>
</button>
The key will tell Vue's algorithm that the icons are in fact different elements. Without that the virtual dom representation thinks that they are the same element.

Try switching the classes using condition
<button #click="toggle = ! toggle">
<i class="fas" :class="toggle?'fa-times':'fa-bars'"></i>
</button>

toggle button on click in jquery

First, let me clear you all one thing that i have already searched a lot but couldn't find the answer which will solve my problem. I have a button which when i click it's icon changes and some functions called than when i again click on that button it's icon must be revert and same functions called again.
I have this button:
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
while clicking on that button these functions and classes should be called:
$('#voice_icon').click(function () {
voiceAtion.voice();
test.start();
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
And when i again click on that icon these icons and classes should be called again :
test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
$('#voice_icon').click(function() {
voiceAtion.voice();
test.start();
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

Try something like this first time click goes to else and for second click it goes to if. so on..
$('#voice_icon').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
//first code
} else {
//second code
}
$(this).data("clicks", !clicks);
});

Instead of addClass/removeClass use toggleClass.
$('#voice_control').toggleClass("fa-microphone-slash fa-microphone");

use hasClass for check which class to remove and add
$(document).ready(function() {
$('#voice_icon').click(function() {
if ($('#voice_control').hasClass("fa-microphone")) {
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
} else {
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

// You can also use global variable and check for true false:
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
<script>
var x = true;
$('#voice_icon').click(function () {
if(x){
$('#voice_control').removeClass("fa-microphone").addClass("fa-microphone-slash")
x = false;
}
else{
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash")
x = true;
}
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
</script>

How to toggle button icon and description javascript

here is my problem. I need on click to change button icon and on another click to go to original state, like +,- and span description like home/back
i dont know what to do. Pleas help.
Here is html...
<div class="navbar-left left">
<button class="toggle btn mr2 white " >
<i class="fa fa-home fa-2x "></i>
<span class="mobile-hide ">Home</a>
</button>
</div>
and bad js
if ($('.toggle').hasClass('fa fa-home fa-2x')) {
$('.toggle').toggleClass('fa fa-home ').html('<span class="mobile-hide ">Home</a>');
} else($('.toggle').hasClass('fa fa-home ')) {
$('.toggle').toggleClass('fa fa-home fa-2x ').html('<span class="mobile-hide ">Back</a>');
}
toggleMenu();
});

You can
jQuery(function($){
$('.toggle').click(function () {
var $i = $(this).find('i').toggleClass('fa-2x');
$(this).find('span.mobile-hide').html($i.hasClass('fa-2x') ? 'Home' : 'Back')
})
})
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar-left left">
<button class="toggle btn mr2 white" >
<i class="fa fa-home fa-2x"></i>
<span class="mobile-hide">Home</span>
</button>
</div>

You can only use .hasClass() to check for a single class Name.
In order to check for many class names I guess is better get the class attribute string and check with .indexOf()
if ($('.toggle').attr("class").indexOf('fa fa-home fa-2x') != -1) {
The same happens with toggleClass. You have to break it down:
$('.toggle').toggleClass('fa').toggleClass('fa-home').toggleClass('fa-2x')

You might be able to achieve this effect with the ::after pseudo-element. Just change the content property as appropriate based on some class on the button.
A simplified example:
$(function () {
$('#toggle').click(function () {
$(this).toggleClass('on');
});
});
.icon::after {
content: '+';
}
.text::after {
content: 'Home';
}
.on .icon::after {
content: '-'
}
.on .text::after {
content: 'Back'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="toggle">
<i class="icon"></i>
<span class="text"></span>
</button>