Why doesn't remove work?

H

hakkol2015-10-21 20:23:33

JavaScript

hakkol, 2015-10-21 20:23:33

Good day. I worked with the form, I wanted to achieve the following - so that when you click on 1 button, an empty form appears, when you click on the second button (which is called using the first button), the record is deleted. Deleting doesn't work. js is hard. Here is the code, tell me what I'm doing wrong

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>			
      <ul>
        <li><span id="add_theme">Add</span></li>

      </ul>
    </div>
    <div class="test"></div>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="superlist.js" type="text/javascript"></script>
  </body>
</html>

$(document).ready(function() {

    $('#add_theme').click(function() {
        $('<div class="ft_inputs">\n' +
            '<input type="text" placeholder="Name theme"/>\n' + 
            '<textarea rows="5" placeholder="Desription theme"></textarea><div class="remove_theme">Delete</div></div>') . 
            fadeIn('slow').appendTo('.test');

    });

    $('.remove_theme').click(function() {
        $('.ft_inputs').remove(); 
    });
});

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

F

Foo Bar, 2015-10-21
@hakkol

Because you don't have a click event assigned to the new .remove_theme elements.
Those. your event creation code should be in the click event of the add button:

$('#add_theme').click(function() {
        $('<div class="ft_inputs">\n' +
            '<input type="text" placeholder="Name theme"/>\n' + 
            '<textarea rows="5" placeholder="Desription theme"></textarea><div class="remove_theme">Delete</div></div>') . 
            fadeIn('slow').appendTo('.test');

        $('.remove_theme').click(function() {
            $('.ft_inputs').remove(); 
        });
    });

And by the way, the Delete button will delete all created objects. As I understand it, it was conceived so that each Delete button would delete only its parent element? If yes, then dig towards the parent() method.

I

Ivan Demidov, 2015-10-21
@Scrum

Delegation to help you

$(document).ready(function() {

    $('#add_theme').click(function() {
        $('<div class="ft_inputs">\n' +
            '<input type="text" placeholder="Name theme"/>\n' + 
            '<textarea rows="5" placeholder="Desription theme"></textarea><div class="remove_theme">Delete</div></div>') . 
            fadeIn('slow').appendTo('.test');

    });

    $('.test').on('click', '.remove_theme', function() {
        $('.ft_inputs', '.test').last().remove(); 
    });
});