Question

我正在尝试在单击按钮时删除父级。

<div class="image">
  <img src="" alt="First">
  <button id="one" class="remove" onclick="removeThis('one');">X</button>
</div>

<script>
function removeThis(_this){
alert("hello" + _this);
    $(_this).parents.remove();
};
</script>

这不起作用

整个代码：

    <!DOCTYPE html>
<html>
<body>

<script>
function registerClickHandler () {
  // Implement the click handler here for button of class 'remove'

}

function removeThis(_this){
alert("hello" + _this);
   // $('#' + _this).parents().remove();
    _this.parentNode.parentNode.removeChild( _this.parentNode );
};

</script>


<div class="image">
  <img src="" alt="First">
  <button id="one" class="remove" onclick="removeThis('one');">X</button>
</div>
<div class="image">
  <img src="" alt="Second">
  <button id="second" class="remove" onclick="registerClickHandler()">X</button>
</div>

</body>
</html>

Answer 1

您没有调用parents()方法

替换

$(_this).parents.remove();

与

$(_this).parents().remove();

或在你的情况下

$(_this).parent().remove();

由于您的问题中未包含jquery标记，因此您也可以使用以下的vanilla js

_this.parentNode.parentNode.removeChild( _this.parentNode );

您还需要将此引用也传递给此方法调用

<button id="one" class="remove" onclick="removeThis(this);">X</button>

根据您更新的代码，尝试将方法更改为此

function removeThis(_this){
   var el = document.getElementById( _this.id ); //assuming '_this' is the 'this' reference not the 'id'
   el.parentNode.parentNode.removeChild( el.parentNode );
};

Answer 2

如果您使用的是jQuery，请更改为：

这

$(_this).parents.remove();

到

$("#" + _this).parents().remove();

如果您使用的是vanilla JS，请更改为以下内容：

<div class="image">
    <img src="" alt="First">
    <button id="one" class="remove" onclick="removeThis(this);">X</button>
</div>

function removeThis(ele) {
    ele.parentNode.remove();
};

Answer 3

您使用#来使用button的ID选择器，因此其工作正常

function removeThis(_this) {
  alert("hello" + _this);
  $('#' + _this).parent().remove();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
  <img src="" alt="First">
  <button id="one" class="remove" onclick="removeThis('one');">X</button>
</div>

Answer 4

<div class="image" ID="DivParent">
  <img src="" alt="First">
  <button id="one" class="remove" onclick="removeThis();">X</button>
</div>
<script>
function removeThis(this){
    $("#DivParent").hide();
};
</script>

Answer 5

在您的代码中试试这个

将parents替换为parents()。请参阅JQuery DOM

如果您正在加载Jquery，请充分利用它（例如click event）

<div class="image">
    <img src="" alt="First">
    <button id="one" class="remove">X</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#one").click(function() {
            alert("Test");
            $("#one").parent().remove();
        });
    });
</script>

如果您只想删除之前的立即元素，可以使用prev()完成。

喜欢这个=＆gt; $("#one").prev().remove();

<强> FIDDLE

javascript如何从onclick中删除父div

5 个答案: