Recently i tried to create dynamic elements and try to delete them. the problem is, every time i want to delete a specific element, the one get remove is the very first created element. i already try to use live() and on() method too. any idea why is this happen? thanks for help
<body>
<h2>To Do List</h2>
<div id="inputfield">
<input type="text" placeholder="add here" id="input">
<button onclick="addlist()">Add</button>
</div>
<div id="content">
</div>
addlist = () => {
let input = document.getElementById("input").value;
let html = '';
html += `<div style="display: flex; justify-content: center; flex-direction: row" class="main">
<div id="list">
<span id="isilist">` + input + `</span>
</div>
<div id="option">
<button id="deletebtn">delete</button>
</div>
</div>`
$("#content").append(html)
}
$("#content").on('click', 'button', function(){
$("#list").remove()
$("#option").remove()
})
or you can try it on https://jsfiddle.net/tLd3kvyo/
The problem was every time you created a new element, they all have the same id="list" hence when you tried removing it, the browser didn't know which id("#list") you were refering to and hence removed the first one. So,
Please change your delete code to this:
$("#content").on('click', 'button', function(){
$(this).parent().prev().remove();
$(this).parent().remove();
})
This will remove the button's parent and previous element too.
Related
I'm trying to Use a combination of JS and Jquery here to select the input text (a few elements previous), when the button is clicked.
I know how to do this just using JS but i want to understand how to do this using jQuery. I get the error message in console: TypeError: ele.setSelectionRange is not a function. Which I take it means that it is not defining the Input Value the way I need it to.
I'm not using ID or Class here to identify the input.
Can someone help me here? Thanks
JS
$(document).ready(function () {
$('.jimmy').click(function(e){
e.preventDefault;
jimsFunction(this);
});
});
function jimsFunction(input) {
let ele = $(input).parent().siblings(':first-child').children();
ele.select();
ele.setSelectionRange(0, 99999);
navigator.clipboard.writeText(ele.value);
alert("Copied: " + ele.value);
}
HTML
<div class="colbody">
<div>
<input type="text" value="www.brave.com" readonly>
</div>
<div>
View
</div>
<div>
<button type="button" class="jimmy">Copy URL</button>
</div>
</div>
setSelectionRange(0, 99999) is not a method on jQuery object. Use it on DOM element.
So try: [0]
Example:
$('.jimmy').click(function(e) {
e.preventDefault;
jimsFunction(this);
});
function jimsFunction(input) {
let ele = $(input).parent().siblings(':first-child').children();
ele[0].select();
ele[0].setSelectionRange(0, 99999);
navigator.clipboard.writeText(ele[0].value);
alert("Copied: " + ele[0].value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="colbody">
<div>
<input type="text" value="www.brave.com" readonly>
</div>
<div>
View
</div>
<div>
<button type="button" class="jimmy">Copy URL</button>
</div>
</div>
I have a form and in my form there is a plus button for adding a div and at last I will send a list of that div to my controller.
$(“#addDiv”).click(function() {
$(“#myForm div# section_0).clone().appendTo(“#myForm”);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id=“myForm”>
<div id=“section_0”>
//some tags here
</div>
<button id=“addDiv” class=“btn btn-primary”>add</add>
</form>
There is not any problem in copying that div but I need to append a new id for that div and be increased by one.
If anyone can help I would appreciate
Set a global variable globalSectionId to increment at each click and replace the attribute id each time you clone()
globalSectionId = 0;
$("#addDiv").click(function (){
$("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm");
// clone(). and set the new id with the .attr() - Thx #Phil
});
I made a JSFiddle working: https://jsfiddle.net/4efkhdba/
globalSectionId = 0;
$("#addDiv").click(function (){
$("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm");
// clone(). and set the new id with the .attr() - Thx #Phil
console.log('the new id:'+globalSectionId)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myForm">
<div id="section_0">
CLONE DIV!
</div>
<button type="button" id="addDiv" class="btn btn-primary">add</add>
</div>
You better create a div with id boilerplate and then use it for cloning. Once you append the clone then iterate through the whole div list and add the id's.
<div id="boilerplate" class="tag">
// some tags here
<div>
$("#addDiv").on("click", function() {
$("div#boilerplate").clone().appendTo("#myForm");
$("#myForm").find("div.tag").each(function(i) {
$(this).attr("id", "section_" + i);
});
});
Try this.
Here I have declared one variable which helps us to update id dynamically.
var id=1;
$("#addDiv").click(function() {
var $div=$("#myForm div:last")
var klon=$div.clone().prop('id','section_'+id++);
$div.after(klon);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div id="section_0">
//some tags here
</div>
</form>
<button id="addDiv" class="btn btn-primary">add</button>
You can try this code here:
Not needed any loop just use document find item length because item length is given integer number and our id start at 0. so when item one then it returns 1 and we create new item id with last change one (1).
$("#addDiv").on('click',function(e){
e.preventDefault();
$('#section_0').append('<div id="section_'+$(document).find('.item').length+'" class="item"> Section '+$(document).find('.item').length+'</div>');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="item" id="section_0">
//some tags here
</div>
<button id="addDiv" class="btn btn-primary">add</div>
</form>
==== Thanks ====
I have a div and I want to duplicate it. I mean that I wanted the same div to be duplicated once. I have used such code for it.
$("#btnAddRules").click(function(){
$(".div1_section").clone().insertAfter($(".div1_section"));
});
But, when click on the button again and again , it is adding multiple of the DIVs and I wanted only one div to be inserted after the last div.
<div class="col-md-8">
<div class="row div1_section">
<div class="col-md-6">
<label>hey hey hey</label>
<select class="form-control">
<option>klklk</option>
<option>huhuuh</option>
</select>
<br/>
</div>
<div class="col-md-6">
<label>abc</label>
<div class="input-group-currency">
<span class="currency">pk</span>
<input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
</div>
</div>
</div>
Hope to hear from you, soon.
Thanks
Use last() to target just the last element from the collection:
$("#btnAddRules").click(function() {
$(".div1_section").last().clone().insertAfter($(".div1_section").last());
});
.div1_section {
line-height:50px;
margin:20px 0;
padding:0 20px;
background:tomato;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>
Remove the event listener after the first click like this:
var callback = function () {
document.getElementById('btnAddRules').removeEventListener('click', callback);
$(".div1_section").clone().insertAfter($(".div1_section"));
}
document.getElementById('btnAddRules').addEventListener('click', callback);
Sorry for using vanilla JS and your jquery, I'm more used to write vanilla JS.
Use last() to target just the last element from the collection and after() to put div after a div:
$("#btnAddRules").click(function(){
$(".div1_section").last().after($(".div1_section").last().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>
I have a datepicker in a div with class pickergroup, I have 3 datepicker in my page, and this is why I use a group and different names
<div class="pickergroup">
<input type="text" name="day1" id="day1"/> /
<input type="text" name="month1" id="month1"/> /
<input type="text" name="year1" id="year1"/>
<input type="hidden" id="date1" name="date1"/>
<div id="datepicker1" name="calendar"></div>
</div>
In my jquery I want to detect when clicking the id wich starts with "datepicker", I guess something like:
$(document).on('click', '.pickergroup id^="datepicker"', function() {
$(".pickergroup").find('[id^="datepicker"]').datepicker({
//my datepicker code
});
});
but this is not correct.
how can I do it?
The problem is how you're selecting the element inside of the event handler.
$(".pickergroup").find('[id^="datepicker"]')
means "find all elements with the class of pickergroup. Find all of their children which have an ID starting with datepicker." Instead, you want to use this and fix your selector from
.pickergroup id^="datepicker"
to
.pickergroup [id^="datepicker"]
$(document).on('click', '.pickergroup [id^="datepicker"]', function() {
var $this = $(this); // The div that was clicked
console.log($this.text());
});
.pickergroup div {
float: left;
margin-right: 1em;
width: 200px;
height: 200px;
background: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pickergroup">
<div id="datepicker1">A</div>
</div>
<div class="pickergroup">
<div id="datepicker2">B</div>
</div>
<div class="pickergroup">
<div id="datepicker3">C</div>
</div>
<div class="pickergroup">
<div id="can-t-click-me">D</div>
</div>
First of all, the datepicker element needs to be an input. And remember, ID's are unique. If you using starts with selector, it is ok. But please dont get confusing with this.
Second, why need seperate fields? You could use one datepicker, decide the format you want to display and you could also parse the returned value from the datepicker in the format you need/want. Please have a look at the documentation.
I have structure like this. On button click jquery code make border of input red if field is empty. Everything works fine with first row. At others row border become red after button click even if i put valid value.
$('.btn-submit').click(function(){
var value = $(':input').val();
if(!value.length) {
$(this).parents('.row').find(':input').css('border-color','#f00');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
<input>
<button class='btn-submit'>Check</button>
</div>
<div class='row'>
<input>
<button class='btn-submit'>Check</button>
</div>
<div class='row'>
<input>
<button class='btn-submit'>Check</button>
</div>
Change you JS-Code:
$('.btn-submit').click(function(){
var value = $(this).parent().find('input').val();
if(!value.length) {
$(this).parents('.row').find(':input').css('border-color','#f00');
}
});
Your Issue:
You select all <inputs/> instead of the closest.
When any button is clicked, it is checking the value of the first <input>.
Change this line:
var value = $(':input').val();
To this:
var value = $(this).prev(":input").val();
This should select the <input> element directly before the button.
Another tip: You seem to try to find the child input of the parent using jQuery. Instead, you can find the sibling, using something like prev() (which will work in your case).
Try this:
$('.btn-submit').click(function(){
var value = $(this).parent().find("input").val();
if(!value.length) {
$(this).parent().find(':input').css('border-color','#f00');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='row'>
<input>
<button class='btn-submit'></button>
</div>
<div class='row'>
<input>
<button class='btn-submit'></button>
</div>
<div class='row'>
<input>
<button class='btn-submit'></button>
</div>
Your problem is that you are looking at all the inputs not just the sibling of the button.
Try this javascript instead:
$('.btn-submit').click(function(){
var value = $(this).parent().find('input').val();
if(!value.length) {
$(this).parents('.row').find(':input').css('border-color','#f00');
}
});
Here is the fiddle