I've got some javascript which I want to be executed and change a list element when a button is clicked:
<button id="click-me" type="button">
<img src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png" alt="Add to Event" style="width: 50px"/>
</button>
<div>
<p>Meeting Participants:</p>
<ol id ="list">
</ol>
</div>
Javascript/JQuery:
var List = document.getElementById('list');
$(function (){
$("#click-me").click(function (e){
e.preventDefault();
document.getElementById('list').style.backgroundColor = "green";
var entry = document.createElement("li");
var testText = document.createTextNode("test")
entry.appendChild(testText);
List.appendChild(entry);
return false;
});
});
The background colour is successfully turned green, but no list element can be seen to be added. Why isn't my code working? Thanks
just put List initialization inside click event handler
$(function (){
$("#click-me").click(function (e){
e.preventDefault();
var List = document.getElementById('list');
document.getElementById('list').style.backgroundColor = "green";
var entry = document.createElement("li");
var testText = document.createTextNode("test")
entry.appendChild(testText);
List.appendChild(entry);
return false;
});
});
A jQuery implementation, as you're already using the library:
$(function (){
$("#click-me").click(function (e){
$('#list').prepend('<li>test</li>').css('background-color', 'green');
return false;
});
});
https://jsfiddle.net/nc9guq2r/
Related
helo here is a code:
<a id="sdffg" href="/allgemeinen/me-libe-love-y/"><p class="erfg" class="quotes">
bla bla bla
</p></a>
i want to delete a element
js code for it:
<script>
window.onload=function(){
var btn = document.getElementById('sdffg');
btn.onclick = function () {
document.getElementById('txt').remove();
this.remove();
};
}
</script>
but it is not working, page:
https://geburtstagsplanet.com/allgemeinen/me-libe-love-y/
my js code is really in source code but it is not working:
view-source:https://geburtstagsplanet.com/allgemeinen/me-libe-love-y/
You can already put onclick directly on your a tag like this:
<a id="sdffg" href="/allgemeinen/me-libe-love-y/" onclick="this.remove()">
Also based on your question you wanted to delete the element on onload then it must be:
Javascript:
window.onload=function(){
var elem = document.getElementById("sdffg");
elem.parentNode.removeChild(elem);
}
you can also use jQuery:
$(document).ready(function(){
$("#sdffg").remove();
});
Problem: #txt doesn't exits in the DOM,
Best guess is you want to delete #sdffg from the dom
window.onload=function(){
var btn = document.getElementById('sdffg');
btn.onclick = function (e) {
e.preventDefault();
document.body.removeChild(this);
};
This should help.
<script>
window.onload=function(){
const element = document.getElementById("elementor-icons-fa-solid-css");
element.remove();
}
</script>
I have an ordered list in HTML:
<ol id ="list">
</ol>
which gets added to using JQuery/javascript:
$(function (){
$("#click-me").click(function (e){
e.preventDefault();
i++;
var list = $("#list");
var name = $("#colleague-select option:selected").text();
var remove = "<button type='button' class='remove-me'> X </button>";
var entry = "<li>" + name + remove+ "</li>";
entry.id = "entryid" + i;
list.append(entry);
return false;
});
});
What I'm trying to do is to allow a user to remove an entry in the list by clicking its corresponding button "X". This is the code I've come up with, but it's not working:
$(function (){
$(".remove-me").click(function(e){
var list = $("#list");
var entry = e.parent(); //find parent entry of clicked "X" button
list.remove(entry); //remove entry from list
});
});
Any help guys? I am fairly new to JQuery so an explanation of your answer code would be much appreciated. Thanks.
You need to use event delegation for binding events to dynamically added elements.
$(document).on('click', ".remove-me", function(e){
var entry = $(this).parent();
entry.remove(); //remove entry from list
});
just remove the parent element
$(function (){
$(document).on("click", ".remove-me", function(e){
$(this).parent().remove(); //find parent entry of clicked "X" button
});
});
A foolproof way is add the event to the button
<button type='button' onclick='removeMe(this);' class='remove-me'> X </button>
and on js
function removeMe(e)
{
$(e).parent().remove();
}
I want to be able to ckick on the h2 in the .editable div and it should change into an input box. Then you can edit it and it will updat the input when you click out of it or press enter. This is what I have for it, i'm stuck:
jQuery:
$('.editable').on('click', function() {
var h3 = $(this)
var input = $('<input>').val(h3.text())
h3.after(input)
h3.hide()
input.on('blur', function(){
})
//blur
//keyup code 13 -- code 27 reset
})
jade: (petty much html)
div.edit-menu-page
div.title
h2 Edit Menu
div.menu-wrap
div.menu-category
div.menu-title
div.editable
h3 Meat
div.menu-items
div.menu-row
span.item-description New York Striploin
div.control-items
span.item-price 10$
span.delete X
.
Basically what you want to do is place a form element next to the original element, then when you're done, replace the form element with the original element.
Something like this should work:
$(document).on('click', '.editable', function() {
var $wrapper = $('<div class="editing"></div>'),
$form = $('<form action="#" class="edit-form"></form>'),
$input = $('<input type="text">');
// Place the original element inside a wrapper:
$(this).after($wrapper);
$(this).remove().appendTo($wrapper).hide();
// Build up the form:
$wrapper.append($form);
$form.append($input);
$input.val($(this).text()).focus();
});
$(document).on('submit', '.edit-form', function(e) {
// Don't actually submit the form:
e.preventDefault();
var val = $(this).find('input').val(),
$wrapper = $(this).parent(),
$original = $wrapper.children().first();
// Use text() instead of html() to prevent unwanted effects.
$original.text(val);
$original.remove();
$wrapper.after($original);
$original.show();
$wrapper.remove();
});
Edit: Here's the JSFiddle: http://jsfiddle.net/c0fb11qw/1/
<div contenteditable="true">
This text can be edited by the user.
</div>
full info: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
Here is a quick answer for you, http://codepen.io/someyoungideas/pen/mJWLXE. Looks like Jade doesn't play too nice with jQuery with the way your input works because it adds some spacing in the input.
$('.editable').on('click', function() {
var h3 = $(this)
var input = $('<input>').val(h3.text())
h3.after(input)
h3.hide()
input.on('blur', function(){
h3.text(input.val());
h3.show();
input.hide();
})
//blur
//keyup code 13 -- code 27 reset
})
Here is what you need:
Working JsFiddler: https://jsfiddle.net/t0hjxxgy/
HTML
<div class="editable">
<h3>Edit me</h3>
</div>
JS
$('.editable').on('click', function() {
var $editable = $(this);
if($editable.data("editing")) {
return;
}
$editable.data("editing", true);
var h3 = $("h3", this);
var input = $('<input />').val(h3.text())
h3.after(input);
h3.hide();
input.on('blur', function(){
save();
})
input.on('keyup', function(e){
if (e.keyCode == '13') {
save();
}
if (e.keyCode == '27') {
reset();
}
})
function save() {
h3.text(input.val());
input.remove();
h3.show();
$editable.data("editing", false);
}
function reset () {
input.remove();
h3.show();
$editable.data("editing", false);
}
})
I am working on some data buttons but can't figure out how to get the function working. I'm trying to add a class to an element via a data-attribute and a corresponding ID. I then want to stop the event propagation with the button inside the subject.
So far this is what I have:
HTML:
<div class ="subject" id="subject1">
<button class="remove">Remove</button>
The Subject
</div>
<div class ="subject" id="subject2">
<button class="remove">Remove</button>
The Subject 2
</div>
<div class ="subject" id="subject3">
<button class="remove">Remove</button>
The Subject
</div>
<button class="trigger" data-subject="subject1">Trigger</button>
<button class="trigger" data-subject="subject2">Trigger</button>
<button class="trigger" data-subject="subject3">Trigger</button>
CSS:
.active {
color:red
}
JS:
var subject = document.querySelector('.subject');
var trigger = document.querySelector('.trigger');
var remove = subject.querySelector('.close');
var data = trigger.getAttribute("data-subject");
var datajs = (function () {
function init() {
[].forEach.call(trigger),function(btn) {
btn.onclick = function() {this.classList.add("active");}
});
remove.addEventListener('click', function (ev) {
ev.stopPropagation();
removeModalHandler();
});
});
}
init();
})();
and here's a fiddle: http://jsfiddle.net/tNS62/1/
My JS isn't that great as you can probably see.
Try this. First we select all the buttons :
var triggers = document.querySelectorAll('.trigger');
var removes = document.querySelectorAll('.remove');
Then we apply the behavior on each button :
for (var i =0; i < triggers.length; i++) {
var btn = triggers[i];
btn.addEventListener('click', function () {
var id = this.dataset.subject;
document.querySelector('#' + id).classList.toggle('active');
}, false);
}
Use dataset to get the id attached to, then search the corresponding element in order to toogle the active class.
I made the same thing for the remove buttons.
i have a standart html label with value:
<label id="telefon" value="101"></label>
i like to edit this value by clicking on the label and enter on the appeared textbox new value (like value="202").
how can i do such a tricky thing?
i tried it with JQuery function, but it really dont wont to work:
$(function() {
$('a.edit').on("click", function(e) {
e.preventDefault();
var dad = $(this).parent().parent();
var lbl = dad.find('label');
lbl.hide();
dad.find('input[type="text"]').val(lbl.text()).show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
http://jsfiddle.net/jasuC/ , Since you didnt provide the markup, take a look into this working example
$(document).on("click", "label.mytxt", function () {
var txt = $(".mytxt").text();
$(".mytxt").replaceWith("<input class='mytxt'/>");
$(".mytxt").val(txt);
});
$(document).on("blur", "input.mytxt", function () {
var txt = $(this).val();
$(this).replaceWith("<label class='mytxt'></label>");
$(".mytxt").text(txt);
});
You don't need the jquery.
To made almost all tag elements editable set the contentEditable to true.
So, you can change using the default features of a HTML.
// You can add an event listener to your form tag and code the handler which will be common to all your labels (Fiddle HERE)
// HTML
<form id="myform">
<label style="background-color:#eee" title="101">Value is 101<label>
</form>
// JS
$(function(){
$('#myform').on('click',function(e){
var $label = $(e.target), $form = $(this), $editorInput = $('#editorInput'), offset = $label.offset();
if($label.is('label')){
if( !$editorInput.length){
$editorInput = $('<input id="editorInput" type="text" value="" style="" />').insertAfter($label);
}
$editorInput.css('display','inline-block')
.data('editingLabel', $label.get(0))
.focus()
.keydown(function(e){
var $l = $($(this).data('editingLabel')), $t = $(this);
if(e.which == 13){
$l .attr('title', $t.val().replace(/(^\s+)|(\s+$)/g,''))
.text('value is now ' + $l.attr('title'));
// UPDATE YOUR DATABASE HERE
$t.off('keydown').css('display','none');
return false;
}
});
}
});
});
// A bit of CSS
#editorInput{display:none;padding:2px;border:1px solid #eee;margin-left:5px}