javascript - 当我按下删除按钮时，如何让父 div 被删除

Question

我正在尝试创建一个删除按钮，它将删除其父 div 及其中的所有内容

function remove() {
  var $this = $(this).closest();
  //console.log($this)
  $this.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: green;">
  <div>NAME</div>
  <div><button onclick="remove">Remove</button>
  </div>
</div>

但是，每当我按下按钮时，什么也没有发生。

编辑:

$(function() {
  $('button').click(function() {
    var $this = $(this).closest('.container');
    $this.remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>NAME 1</div>
  <div><button>Remove</button></div>
</div>
<div class="container">
  <div>NAME 2</div>
  <div><button>Remove 2</button></div>
</div>

没有任何反应，也没有错误发生。

编辑 2:

这是我的整个 javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script type="text/javascript">
var csrftoken = Cookies.get('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
var suggested_students = $("#suggested_students");
var search_bar = $('#search_bar');

function clear(){
    suggested_students.empty(); 
    search_bar.val('');
}

search_bar.keyup(function () {

    var keyword = search_bar.val();
    if(keyword.length > 2){
        //console.log('hey')
        var url = window.location.pathname;
        $.ajax({
            method: 'GET',
            url: url,
            data: {
            'keyword': keyword,
            },
            dataType: 'json',
            success: function (data) {
                suggested_students.empty(); 
                var suggestions = data.students;
                for(i = 0; i< suggestions.length; i++){
                    var current_student = suggestions[i];
                    var div = $("<a href='#'><div/></a>");
                    div.data("name", current_student[0]);
                    div.data("id", current_student[1]);
                    div.html(current_student[0] + "<br/>");
                    div.on("click", moveProfile);
                    div.css({"background-color": "green"});
                    suggested_students.append(div);
                }
            }
            })
        }else if(keyword.length == 0){
            clear()

        }
    })

var students_to_add = $("#students_to_add")

function moveProfile(){
    var $this = $(this);
    var studentID = $this.data("id");
    var studentName = $this.data("name");
    var div = $("<div/>");
    div.data('id', studentID);
    div.data('name', studentName);
    div.html("<div>" + studentName +"</div><div><button>Remove</button></div>");
    div.css({"background-color": "green"});
    div.addClass("container")
    students_to_add.append(div);    
    clear()
}


$(function() {
    $('button').click(function() {
      var $this = $(this).closest('.container');
      $this.remove();
    });
  });


</script>

这是整个 HTML:

<div>
    <label>Set Name: </label>
    <input type="text" class="class_name" id='class_name'/>
</div>
<br>

<div class='student_search_bar'>
    <label for='search_bar'>Search for Students: </label>
    <input type="text" class="student_search_bar_bar" id='search_bar'/>   
</div>
<br>
<div id='suggested_students'>

</div>

<div id='students_to_add'>
    <label>Students to add: </label>

</div>

我有一个函数，它从 AJAX 调用中获取一个列表，并将其变成多个 div，如下所示:

<div class="container">
  <div>NAME</div>
  <div>
    <button>Remove</button>
  </div>
</div>

我的 Javascript 在我的 html 下面，并且都在同一个文件中。

当我运行 Rory McCrossan 建议的代码时，我在控制台中没有收到任何错误，当我使用 console.log 查看函数是否被调用时，没有任何错误打印出来。

Answer 1

当使用 on* 事件属性时，this 引用将是窗口，而不是被点击的元素。此外，closest() 需要一个选择器。

要解决此问题，请将一个不显眼的事件处理程序附加到 button。当您动态附加 button 元素时，您需要使用委托(delegate)事件处理程序，如下所示:

$(function() {
  $('#students_to_add').on('click', 'button', function() {
    var $this = $(this).closest('.container');
    $this.remove();
  });
});

.container {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="students_to_add">
  <div class="container">
    <div>NAME</div>
    <div>
      <button>Remove</button>
    </div>
  </div>
  <div class="container">
    <div>NAME</div>
    <div>
      <button>Remove</button>
    </div>
  </div>
  <div class="container">
    <div>NAME</div>
    <div>
      <button>Remove</button>
    </div>
  </div>
</div>