current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

here is the code:

$('.add').click(function() {

var description = $('#description').val();
$(".append_data").append('<div class="row" style="background: #e6e6e6; color: #666; border-bottom: solid 1px #fff;"><div class="col-md-3"><input type="text" name="1"></div><div class="col-md-5"><input type="text" name="2"></div><div class="col-md-2"><input type="text" name="3"></div><div class="col-md-2"><input type="text" name="4"></div></div><div class="remove">Remove</div>');

});

$('.append_data').on('click', '.remove', function(e) {
    //alert('boom');
  e.preventDefault();
  $(this).closest('.row').remove();
  return false;
});

Here is the code's Fiddle: https://jsfiddle.net/L7su5ke7/

It adds several divs , all right. But how I can delete those with one click - alas! I have not figured out (( I have tried "closest" and "parents" both with no luck

share|improve this question
up vote 1 down vote accepted

What I did is that I enclosed that html code that you dynamically add with another <div>

$('.add').click(function() {

var description = $('#description').val();
$(".append_data").append('<div><div class="row" style="background: #e6e6e6; color: #666; border-bottom: solid 1px #fff;"><div class="col-md-3"><input type="text" name="1"></div><div class="col-md-5"><input type="text" name="2"></div><div class="col-md-2"><input type="text" name="3"></div><div class="col-md-2"><input type="text" name="4"></div></div><div class="remove">Remove</div></div>');

});

$('.append_data').on('click', '.remove', function(e) {
  e.preventDefault();
  $(this).parent().remove();
});

Then just removed the parent when the remove button is clicked!

Link: jsfiddle link

share|improve this answer
1  
Hails Akhilesh! Thank you very much - this works the way it should. No chances to avoid adding that extra DIV? – Rossitten 12 mins ago
1  
Its easier that way! Otherwise you could avoid adding that DIV. Instead just move that <div class="remove">Remove</div> just before the closing div of row element. So that it becomes <div class="row">......<div class="remove">Remove</div></div> – Akhilesh B Chandran 9 mins ago
1  
Perfect! Thank you very much, sire! – Rossitten 5 mins ago
    
You are welcome! :) – Akhilesh B Chandran 3 mins ago
up vote 0 down vote

try this:

$('.append_data').on('click', '.remove', function(e) {
  $(this).parent().find('.row').each(function(){
    $(this).remove();
   });
  return false;
});
share|improve this answer
    
This will remove all divs ( "Remove" divs wil remain though) Unfortunatey -not what I am looking for. Thanks – Rossitten 14 mins ago
    
just add a $(this).remove() before return false. and also it will just remove the row divs. – dumb_terminal 12 mins ago
up vote 0 down vote

https://jsfiddle.net/1z40zrqt/2/

$('.append_data').on('click', '.remove', function(e) {

  e.preventDefault();

  $(this).parent().empty();
  return false;
});
share|improve this answer
    
This code will remove ALL divs at once Thank you - not what I am looking for. Akhilesh (answer above) made it nearly perfectly well. – Rossitten 10 mins ago
up vote 0 down vote

How about this-

$('.append_data').on('click', '.remove', function(e) {
  //alert('boom');
  $('.row').remove();
  $('.remove').remove();

  return false;
});
share|improve this answer
    
This removes all added divs. This wont do, even though I am garteful for the suggestion – Rossitten 16 mins ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.