When user clicks on "edit" how can I find closest row_form and remove it with jquery?
Here is what I tried so far jsfiddle
HTML
<div id="settings_wrapper">
<h1>General settings</h1>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
</div>
JQUERY
$(document).ready(function(){
$(".row_edit_button").click(function(){
$(this).closest(".row_form").remove();
});
});
The target element is the next sibling of the parentNode of the clicked element. closest selects the closest matching parent element. One option is:
$(".row_edit_button").click(function() {
$(this.parentNode).siblings(".row_form").remove();
});
Other options are:
$(this).parent().next(".row_form").remove();
$(this).closest('.settings_row').find(".row_form").remove();
Related
I want to select a form by clicking a button that is a child of the form sibling parent.. i know it's confusing.
<li class="list-group-item d-flex justify-content-between align-items-center task">
<span class="task"><%= task.taskDescription %></span>
(this-form)=> <form action="/edit" method="POST" class="hidden edit-form">
<input type="text" name="taskDescription" />
<input type="hidden" name="id" value="<%-task._id%>" />
</form>
<div class="btns">
(this-btn)=> <button class="edit">Edit</button>
<form action="/delete" method="POST">
<input type="hidden" class="edit" name="id" value="<%-task._id%>" />
<input type="submit" name="submit" value="Delete" />
</form>
</div>
</li>
You can select the form directly using any unique selector. An id might be best, but in the example given, you could use document.querySelector('.edit-form').
If there's multiple similar elements and you want to be sure to get the one with the common parent from the button's onclick handler:
function onclick() {
const form = this.parentNode.parentNode.querySelector('.edit-form');
// do what you want with form here
}
What it does is:
start from this (the button clicked)
Go up to the parent of the DOM element twice (first to <div class="btns"> then to the <li ...> element)
From there we select the <form class="edit-form ..." ...> element.
Removing div element automatically after appending it on click. It
removes the element after it adds or appends inside form tag.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button class="add">+</button>
</div>
</form>
After clicking on the + button the <div> element is appended to the form as expected. But then the form is submitted to the server. When the page reloads the html of the page is rendered again and thus the appended <div> element dissappears.
You can change the type of the button like this
<button type="button" class="add">+</button>
and add another button for sumitting the form.
add type="button" to existing button tag and work well and not submitting while clicking on it.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button type="button" class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button type="button" class="add">+</button>
</div>
</form>
I have two input inside same div and need to change the value of one when I write in another one:
Note: I need to use this because I have same div with same class and id.
My Code:
function customInput() {
let customContent = event.target.value;
let customInput = this.parents('.1');
$(customInput .a1 .b1).val(customContent);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput()">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput()">
</div>
</div>
To refer the current element in the function you can pass this to the function.
You can try with .closest() and .find()
function customInput(el) {
$(el).closest('.1').find('.b1').val(el.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput(this)">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput(this)">
</div>
</div>
Though I prefer using .on() to attach the event (not using the inline event handler) along with input event:
$('.b2').on('input', function() {
$(this).closest('.1').find('.b1').val(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
You are kinda mixing plain javascript with jQuery. Altough this works fine, I think it's better to stick to one as much as possible for readability so I changed all your code to jQuery.
Instead of inline event binding I used jQuery event binding. I recommend to avoid inline binding because it easier to maintain and you can bind multiple handlers to one event or toggle them with the jQuery off() method.
Also changed the keyup event to an input event because that also works on for example copy pasting, you could stick to the keyup event if you don't want that of course.
With the jQuery closest() function you can find the first matching parent.
With the jQuery find() function you can find the matching children.
You can beautify your code a bit to use jQuery chaining if you like. So my commented one liner.
With the find function you can find elements within the parent.
$('.b2').on('input', function() {
let $this = $(this);
let customContent = $this.val();
let $customInput = $this.closest('.1');
$($customInput).find('.a1 .b1').val(customContent);
//One liner that does the same.
//$(this).closest('.1').find('.b1').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
I have the following HTML structure, which cannot be changed.
I need to append the user typed info to a <ul> list with jQuery.
I have tried it using the following code but id does nothing. What would be the correct way to do it?
$(document).ready(function() {
$(".btn btn-outline-primary").click(function() {
let toAdd = $("input[#title]").val();
$("<li>" + toAdd + "</li>").appendTo("<ul>");
});
});
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button type="submit" class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
</body>
</html>
A bunch of bugs to fix:
Separating selectors with space means that the document is searched for the first selector with a descendant of the second selector - you don't want that here, keep the class names together (or just select the btn-outline-primary alone, since there's only one of them)
You need to preventDefault() to keep the form from submitting and replacing the page
The existing ul in the HTML should be selected if you want to append to it - '<ul>' isn't a valid selector.
The #title should just be selected as #title (ids can't be repeated in HTML, after all):
$(".btn-outline-primary").click(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" + toAdd + "</li>").appendTo("ul");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
$(document).ready(function(){
$('form').submit(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" +toAdd+ "</li>").appendTo(jQuery("ul"));
});
});
First override the submit.
Value should be fetched properly. using #title
Append to proper element
You have wrong selectors in your code (for btn and title), plus i'd change also the append code.
Also, you have a submit button inside a form, clicking it will cause the submit.
Try this:
$(document).ready(function(){
$("form").submit(function(e){
//prevent form submit;
e.preventDefault();
//append input text value to UL
$("ul").append("<li>" + $("#title").val() + "</li>");
});
});
Click here to test if in JsFiddle
I want to remove a dynamically generated div using jquery, remove button will be with every div. So when I click any remove button, it will remove that div from DOM.
<div class="form-group" id="drag">
<div class="col-md-2">
<input type="text" class="form-control" id="name1" placeholder="Name">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="eng1" placeholder="Description Eng">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="ar1" placeholder="Description Ar">
</div>
<div class="col-md-2">
<a id="remove" href="javascript:;" class="btn btn-sm red">
Remove
<i class="fa fa-close"></i>
</a>
</div>
</div>
If you would generate a div with inside the div a button, you can add the following function to let that button make the parent div disappear:
function removeParent()
{
//remove button click, remove the parent div from the dom
$(this).parent().parent().remove();
//in your specific case you want the parent parent div to be removed since the button is encapsulated by 2 divs.
}
This function you then need to add to the onclick listener of the button. Either by just setting it in the html onclick='removeParent()' or using javascript:
//gerenate div + button
mybutton.addEventListener('click', removeParent, false);
$('body').on('click', '#remove', function(){
$(this).closest('.form-group').remove();
});
But it's not correct to have more than one elements with the same id. recomment you to change ID to class
Try like below. Use class remove instead of id, because id should be unique.
$('body').on('click', '.remove', function(){
$(this).closest('.form-group').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="drag">
<div class="col-md-2">
<input type="text" class="form-control" id="name1" placeholder="Name">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="eng1" placeholder="Description Eng">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="ar1" placeholder="Description Ar">
</div>
<div class="col-md-2">
<a class="remove" href="javascript:;" class="btn btn-sm red">
Remove
<i class="fa fa-close"></i>
</a>
</div>
</div>