Question

我有两个HTML元素：

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>

两者都具有相同的结构，类和属性。如果我有两个，我怎么能只删除其中一个呢？（这是一个错误）

提前致谢。

Answer 1

DOM查询返回数组，因此如果多个元素匹配，则可以通过索引访问特定元素：

        String sslServerHost = "https://mail.google.com";
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(sslServerHost);
        request.AllowAutoRedirect = false;

        HttpWebResponse response = (HttpWebResponse)request.GetResponse();

      try
        {    
            Stream dataStream = response.GetResponseStream();
            StreamReader reader = new StreamReader(dataStream);
            string responseFromServer = reader.ReadToEnd();
            Debug.WriteLine(responseFromServer);
            Console.WriteLine(responseFromServer);

        }
        catch (Exception e)
        {
            Console.WriteLine(e.Message);
        }

var foo = document.getElementsByClassName('close') // returns an array of matched elements
foo[1].remove(); // removes the second one

（当然，纠正当前插入重复按钮的任何错误可能会更好，但我会假设有些理由在你的情况下是不切实际的。）

Answer 2

您可以使用javascript的document.getElementsByClassName并删除其中一个列表。

var buttons = document.getElementsByClassName("close");
buttons[0].parentNode.removeChild(buttons[0]);

<div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
</div>

Answer 3

首先按班级.close选择按钮：

const [buttonOne, buttonTwo] = document.querySelectorAll('.close');

然后你可以使用：

使用Node.removeChild()

document.querySelector('body').removeChild(buttonOne);

使用ChildNode.remove()

buttonOne.remove();

或者您可以使用HTMLElement.style隐藏元素：

buttonOne.style.display = 'none';

删除具有相同类的两个元素之一

3 个答案: