1

Hola buenas qeurria saber como desde mi main.js acceder a la tarjeta a borrar pero llamando al metodo deleteCard en cuestion

// MAIN
$(document).ready(function(){
    initBtnListeners();
});

function initBtnListeners(){
    $('#add-card-btn').click(function(e){
        e.preventDefault();
        
        $title       = $('input[name="title"]').val();
        $image       = $('input[name="imageUrl"]').val();
        $description = $('input[name="description"]').val();
        
        var card = {
            title: $title,
            image: $image,
            description: $description,
        };
        var card1 = new Card(card).addCard();
        $('#create-card-form')[0].reset();
        
        $(document).on('click', '.btn-delete-card', function(card1){
            card1.deleteCard();
        });
    });
    
}

//CARD PROTOTYPE
function Card(card){
    this.title = card.title;
    this.image = card.image;
    this.description = card.description;
}

Card.prototype.addCard = function(){
    var duplicate = $('#templates > [data-element="card"]').clone();
    duplicate.find('.card-title').text(this.title);
    duplicate.find('.card-img-top').text(this.image);
    duplicate.find('.card-text').text(this.description);
    this.current = duplicate;
    $('#cards-container').append(duplicate);   
};

Card.prototype.deleteCard = function(){ 
    $(this.current).remove();
};
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery - Tutorial</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    
    <div class="container">
        <div class="row mb-5">
            <div class="col-xs-12 col-lg-3">
                <h1>Create Card</h1>
                <form id="create-card-form">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-tag"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" name="title" placeholder="Enter title">
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-image"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" name="imageUrl" placeholder="Enter Image URL">
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-comments"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" name="description" placeholder="Description">
                    </div>
                    <div class="form-actions">
                        <button id="add-card-btn" class="btn btn-primary btn-block">Add Card</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-lg-12">
                <h1>Cards List</h1>
            </div>
        </div>
        <div class="row" id="cards-container">
            <div class="col-xs-12 col-md-3" data-element="card">
                <div class="card">
                    <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
                        <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div id="templates" style="display: none;">
        <div class="col-xs-12 col-md-3" data-element="card">
            <div class="card">
                <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo
                        tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
                        <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
        
        <script src="./card.js"></script>
        <script src="./index.js"></script>
    </body>
    
    </html>

0

1 respuesta 1

6

Tienes dos problemas:

  • var card1 = new Card(card).addCard();

    Aqui deberias dividirlo en dos filas para mantener card1 como la instancia de Card.

    var card1 = new Card(card)
    card1.addCard();
    
  • $(document).on('click', '.btn-delete-card', function(card1){

    Aqui estás pasando a la función un parametro card1 y luego cuando haces card1.deleteCard(); no reconoce el card1 de tu instancia si no el parametro que es undefined porque en el metodo on para la funcion no necesitas pasar parametros.

Para el problema que mencionas de que borra todos los duplicados es porque el evento .on("click") lo aplicas al document y le dices que borre sobre la instancia anteriormente creada.

La solucion es, usar la propia card para que el evento esté enlazado a esa tarjeta usando $(card1.current).on(...

Quedaría asi:

// MAIN
$(document).ready(function() {
  initBtnListeners();
});

function initBtnListeners() {
  $('#add-card-btn').click(function(e) {
    e.preventDefault();

    $title = $('input[name="title"]').val();
    $image = $('input[name="imageUrl"]').val();
    $description = $('input[name="description"]').val();

    var card = {
      title: $title,
      image: $image,
      description: $description,
    };
    var card1 = new Card(card)
    card1.addCard();
    $('#create-card-form')[0].reset();

    $(card1.current).on('click', '.btn-delete-card', function() {
      card1.deleteCard();
    });
  });

}

//CARD PROTOTYPE
function Card(card) {
  this.title = card.title;
  this.image = card.image;
  this.description = card.description;
}

Card.prototype.addCard = function() {
  var duplicate = $('#templates > [data-element="card"]').clone();
  duplicate.find('.card-title').text(this.title);
  duplicate.find('.card-img-top').text(this.image);
  duplicate.find('.card-text').text(this.description);
  this.current = duplicate;
  $('#cards-container').append(duplicate);
};

Card.prototype.deleteCard = function() {
  $(this.current).remove();
};
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JQuery - Tutorial</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <div class="container">
    <div class="row mb-5">
      <div class="col-xs-12 col-lg-3">
        <h1>Create Card</h1>
        <form id="create-card-form">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">
                                <i class="fa fa-tag"></i>
                            </span>
            </div>
            <input type="text" class="form-control" name="title" placeholder="Enter title">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">
                                <i class="fa fa-image"></i>
                            </span>
            </div>
            <input type="text" class="form-control" name="imageUrl" placeholder="Enter Image URL">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">
                                <i class="fa fa-comments"></i>
                            </span>
            </div>
            <input type="text" class="form-control" name="description" placeholder="Description">
          </div>
          <div class="form-actions">
            <button id="add-card-btn" class="btn btn-primary btn-block">Add Card</button>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-12">
        <h1>Cards List</h1>
      </div>
    </div>
    <div class="row" id="cards-container">
      <div class="col-xs-12 col-md-3" data-element="card">
        <div class="card">
          <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
            <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div id="templates" style="display: none;">
    <div class="col-xs-12 col-md-3" data-element="card">
      <div class="card">
        <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
          <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
        </div>
      </div>
    </div>
  </div>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

  <script src="./card.js"></script>
  <script src="./index.js"></script>
</body>

</html>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.