How to delete fields using jquery - javascript

I have problem with my jquery script. I have code like this and my script is deleting only input not label with it. How to delete also label?
<div class="input_fields_container">
#foreach($data->videoTags as $tag)
<div class="el">
<div class="form-group">
<label class="col-lg-2 control-label bold">#lang('main.position')</label>
<div class="col-lg-6 input-group">
<input type="text" placeholder="" name="tag[]" value="{{$tag->tag}}" class="form-control">
<div class="input-group-btn inup-group-addon">#lang('main.delete')
</div>
</div>
</div>
</div>
#endforeach
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.input_fields_container').on("click", ".remove_field", function(e) { //user click on remove text links
e.preventDefault();
$(this).parents().eq(1).remove();
x--;
})
});
</script>

You could use closest() to target the parent div that contain the label also :
$(this).closest('.form-group').remove();
//OR
$(this).closest('.form-group').html('');
NOTE : You could jump up to the el parent you need just to change the selector.

The use of the selector eq here is not very wise. You can check the doc to understand how to use it efficiently :
https://api.jquery.com/eq-selector/
You can read:
"They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors."
By doing $(this).parent().eq(1).remove(), you will remove only one element of the array of element that match the selection of $(this).parent(). You can check what is in your array to try to understand what to remove.
I suggest that you can use your foreach to create a attribute like "data-input=y" on your <div class="el">, where y is a variable that you increment. Like that you can quickly know which input to delete and your selection is not depending of the structure of the DOM.

Related

Changing text of closet div in an array of divs

I have the following html
<div class="form-group col-md-2 border">
<label for="month">Month 1 - 01/11/2019</label>
<input type="text" class="form-control" id="inputCity[]" name="inputCity[]" value="550">
<label for="Costs">Costs</label>
<input type="text" class="form-control" id="inputcosts" name="costs" value="0">
<label for="grossprofit"><b>Gross Profit</b></label><div id="grossp[]"></div>
</div>
I am attempting to change the grossp[] text depending on what is input into the inputcosts box, using the following
$(document).on('change keydown paste input', '#inputcosts' , function() {
var monthcalc = $(this).closest("input[name='inputCity[]']").val();
var gcost = monthcalc - this.value;
$(this).closest("div[id='grossp[]']").html(gcost);
});
The div is not updating and no error message.
Any ideas?
By documentation, .closest checks self and all parents
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
It's because #grossp[] is not parent of inputcosts.
First select parent and then do .find
$(this).closest('.form-group').find("div[id='grossp[]']")
Since you select by ID, no need to find anything around, since ID is unique in page: $('#grossp[]')
By your naming id='grossp[]' it seems that there is multiple elements by same ID. It's not possible/valid. Only name attribute can contain [] to submit it as array of elements. Any other attribute is just plain text.

How to traverse up to closest element block in jquery?

I am having a difficult time targeting the closest div sitting on top of my button element. The markup is here:
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text"
maxlength="50"
tabindex="1"
name="kennel-1"
id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>
When .duplicateKennel is clicked, I want to grab the .kennelEntry element, so that I can add a new element directly underneath.
For full disclosure, the goal here is when button is clicked, I can duplicate that entire .row, to build a dynamic form where user can create as many entries and those are saved in my backend. When duplicated, I just need to alter the label and name properties for the label and input. I'm just having a hard time targeting the closest kennelEntry to the button being targeted.
You can use jQuery's .prev() for that :
$('.duplicateKennel').on('click', function(){
$(this).before($(this).prev().clone());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text" maxlength="50" tabindex="1" name="kennel-1" id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>

Add tooltip to container when child is disabled

What I'm trying to accomplish is add a tooltip to a container div that wraps an input I'm disabling. Basically, a tooltip on disabled. Seeing that I can't do it on the disabled input I'm doing it on the container element.
I'm trying to add the tooltip to the container dynamically using this:
$('.input-group date').tooltip({'container':'body','placement':'top', 'trigger' : 'hover', 'title':'maximize'});
But it's not working.
On document.ready I do this:
$('[rel="tooltip"]').tooltip() // Opt-in for tooltips
And the element itself looks like this:
<div class="input-group date" rel="tooltip">
<input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
<button class="input-group-addon" id="dp1Icon" onclick="return false" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></button>
</div>
What am I doing wrong? I think I have all the correct elements in place. Is there an easier way to assign a tooltip to a container element when its child input is disabled?
Am I making this more complicated?
This:
$('.input-group date')
means "select all <date> elements that are descendants of elements with the input-group class".
Given that you said your markup was:
<div class="input-group date" rel="tooltip">
you presumably instead want:
$('.input-group.date')
i.e. "select all elements that have both the input-group and date classes"
TL;DR: Use a dot instead of a space in your selector
I ended up with using the show.bs.tooltip handler and testing if the component was disabled; if not, I'd prevent the default action a la:
// Set the tooltip for a start date that can't be edited (when mtg is in progress)
$(".form-group.startDate").on("show.bs.tooltip",function(e){
if ( !$("#dp1").is(":disabled") )
e.preventDefault();
});

Get child input element value update

HTML code as follows:
<div id="input2" class="clonedInput">
<div class="col-sm-3 text_flied">
<div class="col-sm-4 no-padding">
<input type="" class="bwidth" value="" placeholder="300" name="fr_width[1]">
</div>
<div class="col-sm-1 text_middle no-padding">
<p>X</p>
</div>
<div class="col-sm-4 no-padding">
<input type="" class=" bheight" value="" placeholder="300" name="fr_height[1]">
</div>
</div>
</div>
I want to update the value of the input field fr_width[1]. This sections are dynamically created as fr_width[2], fr_width[3] and so on.
To update the value, I use the following code, but it is not working. I tried the children() option too.
$("#input2").siblings(".col-sm-4 input").val('123');
$("#input2").closest(".bwidth").val('123');
Both ways are not working.
Try DEMO :-
$("#input2").find(".text_flied").find(".bwidth").val('123');
OR
$("#input2").children(".text_flied").find(".bwidth").val('123');
OR
$("#input2").find(".bwidth").val('123');
OR
The shortest way you can go for
$("#input2 .bwidth").val('123');
1)- closest only works for ancestor or the selector itself .
2)- siblings only works for the same heirarchy nodes.
There are lots of ways you can find your required selector and set value to it .
Thanks !
You can simply use something like this. If you want to get specific item dynamically.
var itemIndex = 1;
$("input[name='fr_width["+itemIndex +"]']").val("123")
Please read the documentation on jQuery's siblings and closest.
Siblings is for getting the elements on the same DOM level as the selector, in this case #input2, and not its children
Closest is for getting the closest parent element of #input2, up in the DOM tree
What you want is simply:
$('#input2 input.bwidth').val('123')
to update the .bwidth input under #input2 only. If there are more, then $('input.bwidth').val('123') should update all inputs with the class name bwidth.
Here is a reference on how jQuery's selectors work.
Why so difficult? Just select all inputfields within div with id "input2". So you can choose the inputfield from the returned array.
Example:
$('#input2 input').eq(0).val("123");

How to properly select the next div with jQuery

I am trying to the select the next closest div to the input tag changed. When I run this nothing happens. I have tried the closest tag and the next tag.
$("input[id='declined']").change(function(){
$(this).next('div.textarea_container').fadeIn();
});
Html:
<div id="gcheckbox">
<input type="radio" id="name10" class="guidelines" name="Confirmed diagnosis of melanoma" value="Accepted">
<input type="radio" class="guidelines no_margin" name="Confirmed diagnosis of melanoma" id="declined" value="Declined">
<label>Confirmed diagnosis of melanoma</label>
<div class="textarea_container">
<textarea placeholder="reason" id="notearea0"></textarea>
</div>
</div>
I have now made a sample file.
http://jsfiddle.net/dMmuW/
jQuery's next function only works for the adjacent sibling element, use nextAll to get all sibling elements after the selected one and filter to the one you want.
$('#declined').change(function () {
$(this).nextAll('div.textarea_container').fadeIn();
});

Categories

Resources