CODEWITHSUNDEEP
javascriptjquery
Gustavo Sousa
Gustavo Sousa

Reputation: 35

How to implement this remove function

I'm trying to make a remove button that removes all that is between the li tag whose the button is inside. 

$(document).ready(function() {

    $('#Adicionar1').click(function() {
        $('#list1').append("<li>"+ $("#Texto1").val() +"<button>remover</button>" +"</li>");
$("#Texto1").val("");        
    });

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


    });


});

code: http://jsfiddle.net/bdMAF/917/

Upvotes: 1

Views: 70

Answers (3)

Taplar
Taplar

Reputation: 24965

Similar answer to one above: http://jsfiddle.net/bdMAF/920/

HTML

<span class="delegateAnchor">
    <h3>TEMAS A APRENDER</h3>

    <input id="Texto1" type="text" name="" value="">
    <button id="Adicionar1">Adicionar</button>
    <ul id="list1"></ul>

    <h3>TEMAS APRENDIDOS</h3>

    <input id="Texto2" type="text" name="" value="">
    <button id="Adicionar2">Adicionar</button>
    <ul id="list2"></ul>
</span>

Javascript

$(document).ready(function () {
    var $list1 = $('#list1');
    var $text1 = $("#Texto1");

    $('#Adicionar1').click(function () {
        var $li = $('<li>');
        $li.append($text1.val()).append("<button>remover</button>");
        $list1.append($li);
        $text1.val('');
    });

    $('.delegateAnchor > ul').on('click', 'button', function() {
        $(this).parent().remove();
    });
});

Upvotes: 1

RobertoNovelo
RobertoNovelo

Reputation: 3810

I would use jQuery's .parent() function, and make use of data attributes:

$(document).ready(function() {

    $('.Adicionar').click(function() {
        console.log($(this).data("listid"));
        console.log($(this).data("textid"));
        
        $("#"+$(this).data("listid")).append("<li>"+         $("#"+$(this).data("textid")).val() +'<button class="remove">remover</button>' +"</li>");
        
    $("#"+$(this).data("textid")).val("");    
        $('.remove').on("click",function() {       
            $(this).parent().remove();
        });
    });



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h3>TEMAS A APRENDER</h3>
<input id= "Texto1" type="text" name="" value="">
    <button class="Adicionar" data-listid="list1" data-textid="Texto1">Adicionar</button>
<ul id="list1"></ul>

<h3>TEMAS APRENDIDOS</h3>
<input id= "Texto2" type="text" name="" value="">
    <button class="Adicionar" data-listid="list2" data-textid="Texto2">Adicionar</button>
<ul id="list2"></ul>

Upvotes: 1

epascarello
epascarello

Reputation: 207501

Well you can not add an event to an element that does not exist. You need to either attach the event when the button is added or use event delegation. 

$('#list1').on("click", "li button", function() {  //listen for click on button
    $(this)  //the button that was clicked
        .closest("li")  //find the li element
        .remove();      //remove the li
});

Upvotes: 2

Related Questions