我需要在單擊子圖示時洗掉父 div。為了實作這一點，我使用 for 回圈來選擇所有父元素，并在其中使用洗掉函式，但我無法理解哪里出錯了。現在我只能洗掉一張卡而不是每張卡。請幫助解決這個問題。

CSS

.box {
            background:red;
            padding:10px;
            width:200px;
            display:none;
        }

        .selection-row {
            background:yellow;
            margin-bottom:10px;
        }

        .delete-selection-btn {
            background:red;
            width:150px;
            padding:20px;
        }

HTML

<div class="mycards delete-row-btn">
     <div class="selection-row selectionRow" >
         Hell Shubham This is the data
         <div class="accordion accordion-btn active" >
             <div class="my-details" >
                 <div class="delete-selection-btn" onclick="deleteRow()" id="Div4">
                     X1
                 </div>
             </div>
         </div>
     </div>

</div>

    <div class="mycards delete-row-btn">
     <div class="selection-row selectionRow" >
         Hell Shubham This is the data
         <div class="accordion accordion-btn active" >
             <div class="my-details" >
                 <div class="delete-selection-btn" onclick="deleteRow()" id="Div1">
                     X2
                 </div>
             </div>
         </div>
     </div>

</div>

    <div class="mycards delete-row-btn">
     <div class="selection-row selectionRow" >
         Hell Shubham This is the data
         <div class="accordion accordion-btn active" >
             <div class="my-details" >
                 <div class="delete-selection-btn" onclick="deleteRow()" id="Div2">
                     X3
                 </div>
             </div>
         </div>
     </div>

</div>

JS

<script>
    var selectionRow = document.getElementsByClassName('selectionRow');
    //var child = document.getElementById('selectionRow');

    for (i = 0; i < selectionRow.length; i  ) {
        var x = selectionRow[i];
        function deleteRow() {
           x.parentElement.remove();
          
        }
    }
</script>

uj5u.com熱心網友回復：

這是另一個解決方案。

function deleteRow() {
  event.target.closest('.delete-row-btn').remove();
}

.box {
  background: red;
  padding: 10px;
  width: 200px;
  display: none;
}

.selection-row {
  background: yellow;
  margin-bottom: 10px;
}

.delete-selection-btn {
  background: red;
  width: 150px;
  padding: 20px;
}

<div class="mycards delete-row-btn">
  <div class="selection-row selectionRow">
    Hell Shubham This is the data
    <div class="accordion accordion-btn active">
      <div class="my-details">
        <div class="delete-selection-btn" id="Div4" onclick="deleteRow()">
          X1
        </div>
      </div>
    </div>
  </div>
</div>

<div class="mycards delete-row-btn">
  <div class="selection-row selectionRow">
    Hell Shubham This is the data
    <div class="accordion accordion-btn active">
      <div class="my-details">
        <div class="delete-selection-btn" id="Div1" onclick="deleteRow()">
          X2
        </div>
      </div>
    </div>
  </div>
</div>

<div class="mycards delete-row-btn">
  <div class="selection-row selectionRow">
    Hell Shubham This is the data
    <div class="accordion accordion-btn active">
      <div class="my-details">
        <div class="delete-selection-btn" id="Div2" onclick="deleteRow()">
          X3
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以給父母一個 id，然后將 id 傳遞給函式。

function delete_row(id) {
   document.getElementById(id).remove();
}

uj5u.com熱心網友回復：

這對我有用：

<script>
    function deleteRow() {
        var div = event.target;
        var row = div.parentNode.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
</script>

你必須獲取點擊的元素，然后獲取他的父項（三次獲取 .selection-row）。然后你有你想要洗掉的行。現在您可以獲取其父級并洗掉其子級。

uj5u.com熱心網友回復：

您可以使用.closest方法https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

onclick="this.closest('.selection-row').remove()"

uj5u.com熱心網友回復：

在這里你有一個解決方案，希望它有幫助:)

function deleteRow(el){
  let parent = el.parentElement;
  //when click in button go to select the parent element until we have selected the row div which contains class "delete-row-btn"
  while( !parent.classList.contains('delete-row-btn') ){
    parent = parent.parentElement;
  }
  
  //now parent = div.delete-row-btn and we go to remove it
  parent.parentElement.removeChild(parent)
  
}

.box {
            background:red;
            padding:10px;
            width:200px;
            display:none;
        }

        .selection-row {
            background:yellow;
            margin-bottom:10px;
        }

        .delete-selection-btn {
            background:red;
            width:150px;
            padding:20px;
        }

<div>

<div class="mycards delete-row-btn">
     <div class="selection-row selectionRow" >
         Hell Shubham This is the data
         <div class="accordion accordion-btn active" >
             <div class="my-details" >
                 <div class="delete-selection-btn" onclick="deleteRow(this)" id="Div4">
                     X1
                 </div>
             </div>
         </div>
     </div>

</div>

    <div class="mycards delete-row-btn">
     <div class="selection-row selectionRow" >
         Hell Shubham This is the data
         <div class="accordion accordion-btn active" >
             <div class="my-details" >
                 <div class="delete-selection-btn" onclick="deleteRow(this)" id="Div1">
                     X2
                 </div>
             </div>
         </div>
     </div>

</div>

    <div class="mycards delete-row-btn">
     <div class="selection-row selectionRow" >
         Hell Shubham This is the data
         <div class="accordion accordion-btn active" >
             <div class="my-details" >
                 <div class="delete-selection-btn" onclick="deleteRow(this)" id="Div2">
                     X3
                 </div>
             </div>
         </div>
     </div>

</div>
</div>

標籤：javascript

上一篇：javascriptlocalstorage只顯示第一項

下一篇：傳遞給`selectId`實作的物體回傳RTK查詢