We Keep Coding

How can I hide this table row based on the value of an input field 4 levels down

I have a table with lots of rows
I have a filter to hide these rows based on the content of a child element (an input field) several levels down within the row
The input field within the row is wrapped several times. I can't manage to hide the row based on that inputs value.
Here's how a row looks:
<tr class="acf-row" data-id="row-13">
<td class="acf-field acf-field-date-picker acf-field-5de02ec006a2e" data-name="datum" data-type="date_picker" data-key="field_5de02ec006a2e">
<div class="acf-input">
<div class="acf-date-picker acf-input-wrap" data-date_format="dd.mm.yy" data-first_day="1">
<input type="text" class="input hasDatepicker" value="24.03.2020" id="dp1582735317447">
</div>
</div>
</td>
</tr>
Please note that there are more siblings on each level than I've put in here for readability. But the hierarchy is as displayed here.
Then I've got this input field to define what we want to filter:
<input placeholder="Datum filtern" type="text" id="datefilter" style="padding:5px; width:150px;">
And last but not least the jquery:
$( "#datefilter" ).change(function() {
var filterdate = $("#datefilter").val();
jQuery('.input.hasDatepicker').each(function() {
var currentElement = $(this);
var dateinfield = currentElement.val();
if( dateinfield !== filterdate){
$(this).closest('.acf-row').hide();
}
});
});
Currently it hides all the rows, not just those with a different value. What should happen is that only the rows get hidden where the value of #datefilter is different from the value of .input.hasDatepicker
I tried a few things like trying to use .parent().parent()... but didn't get it to work. Help would be greatly appreciated.
Here's a jsfiddle with the whole table including all siblings:
https://jsfiddle.net/59by3w7o/
UPDATE:
I think I can now say for sure the issue is 2 instances of the input element in each row. Here's a jsfiddle with only that and no noise:
https://jsfiddle.net/8k41xy6u/
How could I solve that? I tried playing with :first but couldn't get it to take the first within each .acf-row and not the very first in the whole document.

From the updated JSFiddle, a table row looks something like:
<tr class="acf-row">
<td>
<div class="acf-input">
<div>
<input class="input hasDatepicker" type="text" value="26.03.2020">
<input class="input hasDatepicker" type="text" value="10:00">
</div>
</div>
</td>
</tr>
And now the problem becomes clear. In the JS, .each() iterates over everything with the classes .input and .hasDatepicker. Both your inputs match that, so it will test both of them. If the value of the either one does not match your filterdate that row will be hidden. But the 2nd input value is a time, and that will never match a date, no matter what the date is - so every row will always be hidden.
There are 2 obvious ways to tackle this - 1) make the inputs distinguishable, so you can target just the date input in your filter comparison, OR 2) somehow target just the first input in the set of 2.
The first option (make them distinguishable) is by far the best, as the second relies on the layout of the HTML. It could happen in future that you'll do a redesign and the inputs won't be in the same order, or even in the same <div>, and then your JS will break. That might even happen without you doing it or even knowing about it if the HTML is autogenerated by some 3rd-party library (eg ACF/Wordpress), and a plugin update changes things. But if you can distinguish the inputs then you can target the right ones no matter where they are on the page.
To make them distinguishable, you could add a class, eg:
<input class="input hasDatepicker date" type="text" value="26.03.2020">
Then update your JS to target only those:
$('.input.hasDatepicker.date').each(function(i) {
If changing the HTML isn't an option, then you'll have to rely on and make use of position. Iterate instead over all div.acf-inputs, and find the first input in each:
$('div.acf-input').each(function(i) {
var dateinfield = $(this).find('input.input.hasDatepicker').first().val();
// ...
Working JSFiddle (of option 2).

How can I retrieve a value in jquery with a button click?

I have the following code:
jQuery
$(document).ready(function(){
$('input[name="new_tax_button_post_tag"]').click(function(){
value = $('input[name="post_tag"]').val();
$("#fieldID3").val(value);
});
});
and I want it change:
HTML
<input type="text" id="fieldID3" name="changeme"value="n/a">
The problem is that the click itself is what creates the value, so I have to click the button twice to get the desired results. The first click creates the value. The second click sets the value in the field.
How do I make it so that it does it in one click?
It's like which came first the chicken or the egg.....

I write jquery on the basis of ID of button and textbox,
and also remove value from following input field,
<input type="text" id="fieldID3" name="changeme">
$(document).ready(function(){
$("#new_tax_button_post_tag").click(function(){
value = $("#post_tag").val();
$("#fieldID3").val(value);
});
});
I hope this useful for you.

Remove focus and click event - Jquery

Good day.
Create 5 divs dynamically with jQuery. These Divs are created after I type in a text type Input.
After creating these divs have to click on one of them and pick up the text, and add this text in the input that entered the text.
But the problem that when I type the text the first time, I give a FOCUS on input, so when I click on any div created by me, the following happens:
1 - The first click, remove the FOCUS
2 - In the second click it sends the value to the input
You see I have to give 2 clicks, but I like to do that in just one click ...
$('.tags_add').on("click",".tags_vdd", function(){
//$("input[name=tags]").trigger("blur");
//$(".tags_vdd").trigger("click");
Pegar_dado = $(this).text();
$('input[name=tags]').val(Pegar_dado);
});
<div class="tags_add">
<span class="tags_vdd">ccc</span>
<span class="tags_vdd">CCCCCCCCCCCCCCCCCC</span>
<span class="tags_vdd">cxcc</span>
<span class="tags_vdd">cc</span>
<span class="tags_vdd">cxc</span>
</div>
<input type="text" name="tags" placeholder="Tags" class="tags valid"/>

I can't reproduce your issue : JsFiddle
After loading the page, I type something in the input, then I select a div and in one click it
$('.tags_add').on("click",".tags_vdd", function(){
Pegar_dado = $(this).text();
$('input[name=tags]').val(Pegar_dado);
});

Adding inputs on the fly jquery

I was wondering if I could get some help with jquery. This is the html I have now:
http://jsfiddle.net/spadez/9sX6X/4/
<form name="input">
<input id="current" type="text" name="content" placeholder="content">
<input type="submit" value="Add" id="add">
</form>
What I want to do is when the user clicks "add" and as long as the input field isnt empty, I want to do the following:
Change that input field id to "accepted" and remove the add button
next to it and replace it with a remove button
Add an input field below the original one with the id to "current"
with an add button next to it
I want this process to happen every time the add button is clicked so more and more input boxes can spawn under each other. As far as I got was trying to spawn input boxes but even that doesn't work.
function addField(){
$('#add').append('<input type="text" name="myinput" />');
return false;
}
Can anyone please show me how this should be achieved.

I think it isn't a good solution to clone existing elements every time. Instead I would suggest cloning ... well... clones )) The original input and button remain the same, only visually shifted.
Is this behavior needed? - http://jsfiddle.net/skip405/9sX6X/6/

Use before()
$('#add').before('<input type="text" name="myinput" />');
since you need to append the new input just before your submit button (and not into it, which is not possible here, since it's an input element)

A working example http://jsfiddle.net/steelywing/9sX6X/12/
$('form').on('click', '.add', function () {
var row = $(this).closest('div'),
new_row = row.clone();
row.find('input:text').addClass('accepted');
row.find('.add')
.removeClass('add')
.addClass('remove')
.val('Remove');
new_row.find('input:text').val('');
row.after(new_row);
}).on('click', '.remove', function () {
$(this).closest('div').remove();
});

Element added to DOM but doesn't display on screen

Basically my problem is that when i add an element from the javascript (using jquery) the element that i added shows up in the web inspector but doesn't display in the browser at all.
What i am trying to do is simulate something i liked about google+ when it first came out, which is when you want to the user to enter a list of item, you provide them with one text field and once they start to add something to that text field then instantly after the first character is typed a new text field with appear under that. So I'm my code, i have the user entering a series of goals they want to achieve, i provide them with a single text field (or multiple if the user is editing the list they previously made) and once the last text field has data then it will programmatically create a new text field.
HTML:
<div class="field-group clickToAddGroup">
<label>Goals: </label>
<div class="input">
<input type="text" name="goals" value="Goal1">
<input type="text" name="goals" value="Goal2">
<input type="text" name="goals" value="Goal3">
<input type="text" name="goals" value="Goal4">
<input type="text" name="goals" placeholder="Type to add Goal" class="clickToAdd">
</div>
</div>
Javascript:
$(".clickToAdd").live('keyup',function(){
console.log("key up triggered");
if( $(this).val() != '' )
{
console.log("cloning in process");
var theClone = $(this).clone().val(''); // Set the new element to null
theClone.appendTo( $(this).parent() ); // Clone Parent
$(this).removeClass('clickToAdd'); // Remove the click to add class
console.log("clone complete");
}
console.log("key up finished");
console.log("----");
});
$('.clickToAddGroup input').live('blur', function(){
if( $(this).val() == '' && !$(this).hasClass('clickToAdd') )
$(this).remove();
});
Now the code above actually works, however when the page first loads when i click (or tab to) the last text field (one that has the clickToAdd class) and begin typing, i see in the web inspector that the javascript ran correctly and created the new field and placed it where it should, but i don't actually see it on the screen. But when i take the content that i had just wrote in the text field, delete it, and lose focus (triggering 'blur') the text field is deleted and then i can see the textfield that was shown. From this point on when i add content to the last field (one with the clickToAdd class) it works 100% perfectly, it adds the element and is visible via both the web inspector AND is displayed on screen.
Edit: I copied the code to jsfiddle (included css i am using as well) and tried it there and it happens to work perfectly as intended without the issue i am having. http://jsfiddle.net/qz2QK/2/
Edit 2: Added "var" to the line "var theClone = $(this).clone().val('');" so that its not implicitly a global variable.